TinyMCE模式如何返回格式化/可视文本？

时间：2019-02-19 作者：Florian Walther

我正在尝试自定义插件中编辑器按钮的行为。单击会打开一个模式，用户可以在其中输入一些文本。确认后，我想将此文本包装到代码标记中。但我不想把这个文本当作来自文本编辑器，我想把它当作可视文本来处理。这意味着，我希望保留任何格式（空格和换行符），但不接受除我随后添加的代码标记之外的任何其他标记。

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();
            }
        });
    }

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

（修改后的答案）

您可以使用tinymce.DOM.encode() 将所有HTML标记转换为其实体，例如。&lt; 对于< 和&gt; 对于>:

var html = tinymce.DOM.encode(e.data.code);
然后，要保留尾随空格，请执行以下操作：

html = html.replace(/(^ +| +$)/gm, function(match, p1){
  return p1.replace(/ /g, \'&nbsp;\');
});
将所有换行符转换为<br>:

html = html.replace(/(?:\\r\\n|\\r|\\n)/g, \'<br>\');
所以你的onSubmit 看起来像，你可以试试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 `&nbsp;`.
    html = html.replace(/(^ +| +$)/gm, function(match, p1){
      return p1.replace(/ /g, \'&nbsp;\');
    });

    // 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();
}
贷记至this SO answer 对于换行符转换

标签： tinymce   editor   html-editor   小码农  

相关推荐

将自定义块格式添加到TinyMCE。在应用格式时出现JavaScript错误之前，一切都会正常运行

我试图在TinyMCE中的“块格式”下拉列表中添加一个项。我想添加一个名为“标题2灯光”的格式。在里面functions.php 我添加此代码：function theme_tiny_mce_before_init( $init ) { $init[ \'block_formats\' ] = \'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 2 Light=h2-light;Heading 3=h3;Heading 4=h4;Heading