editor - How can a TinyMCE modal return formattedvisual text?

I am trying to customize the behavior of an editor button in a plugin. 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();
            }
        });
    }

I am trying to customize the behavior of an editor button in a plugin. 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();
            }
        });
    }

• tinymce
• editor
• html-editor

Share Improve this question edited Feb 19, 2019 at 23:48 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Feb 19, 2019 at 23:13 Florian WaltherFlorian Walther 15911 silver badge88 bronze badges 2

• You mean like this? – Sally CJ Commented Feb 20, 2019 at 10:39
• @SallyCJ Close! I also want to keep whitespaces in the beginning of each line if that's possible! – Florian Walther Commented Feb 20, 2019 at 10:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

(Revised answer)

You can use tinymce.DOM.encode() to convert all HTML tags to their entities, e.g. < for < and > for >:

var html = tinymce.DOM.encode(e.data.code);

Then to preserve trailing white-spaces:

html = html.replace(/(^ +| +$)/gm, function(match, p1){
  return p1.replace(/ /g, ' ');
});

And this to convert all line breaks to <br>:

html = html.replace(/(?:\r\n|\r|\n)/g, '<br>');

So your onSubmit would look like, which you can try here:

onSubmit: function(e) {
  ed.focus();

  ed.undoManager.transact(function() {
    // Encode all HTML tags to their entities.
    var html = tinymce.DOM.encode(e.data.code);

    // Then convert trailing whitespaces to ` `.
    html = html.replace(/(^ +| +$)/gm, function(match, p1){
      return p1.replace(/ /g, ' ');
    });

    // Finally, convert line breaks to `<br>`.
    html = html.replace(/(?:\r\n|\r|\n)/g, '<br>');

    // Make sure the format is "raw".
    ed.insertContent('<code>' + html + '</code> ');
  });

  ed.selection.setCursorLocation();
  ed.nodeChanged();
}

Credit to this SO answer for the line breaks conversion.