• I am trying to customize the behavior of an editor button in a plugin. I basically want to achieve similar behavior to the “insert code sample” button here.

    On click, it opens a modal where the user can input some text. On confirmation, I want to wrap this text into code tags. But I don’t want to take this text as if it comes from a text editor, I want to handle it as visual text. This means, I want to preserve any formatting (whitespaces and linebreaks) but not accept any other tags besides the code tags that I add afterward.

    function showDialog() {
        var win = ed.windowManager.open({
                title: "Insert code",
                body: {
                    type: 'textbox',
                    name: 'code',
                    multiline: true,
                    minWidth: ed.getParam("code_dialog_width", 600),
                    minHeight: ed.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),
                    spellcheck: false,
                    style: 'direction: ltr; text-align: left'
                },
                onSubmit: function(e) {
                    ed.focus();
    
                    ed.undoManager.transact(function() {
                        ed.insertContent('<code>' + e.data.code + '</code>');
                    });
    
                    ed.selection.setCursorLocation();
                    ed.nodeChanged();
                }
            });
        }
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘How can a TinyMCE modal return formatted/visual text?’ is closed to new replies.