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

【问题标题】：How can a TinyMCE modal return formatted/visual text?TinyMCE 模态如何返回格式化/可视文本？
【发布时间】：2019-02-19 23:10:42
【问题描述】：

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

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

【问题讨论】：

标签： wordpress tinymce tinymce-4 tinymce-plugins

【解决方案1】：

首先，我将该函数包装在标签中，并确保通过在该函数末尾添加 showDialog() 来启动该函数，以便 DOM 知道调用该函数。并且使用 wordpress 的内容过滤器，它无论如何都会添加空格，除非您从自动填充格式中禁用内容过滤器。如果您访问https://www.willpeavy.com/minifier/ 之类的站点并将您的代码复制到其中并缩小空格，您应该能够将其包含在 MCE 的文本（而非视觉）选项卡中。话虽这么说，在 MCE 中运行功能代码确实很糟糕，你最好为它制作一个单独的页面/帖子模板。

【讨论】：