在 TinyMce 4 中添加 <pre> 标签按钮

Question

我想将代码添加到 tinymce 文本区域中，并计划使用 highlight.js 突出显示它

为了做到这一点，我只需要在标签 <pre></pre> 之间包装代码，剩下的工作会由 highlight.js 完成。

我尝试在 tinymce 中使用 code plugin，这会打开一个弹出窗口，用户可以在其中粘贴代码。但令我惊讶的是，它实际上对那个文本没有。它只允许您查看它的 HTML 代码，基本上只会显示 </p> 标记之间的文本。

我宁愿不使用codesample plugin，因为我只想添加pre 标记并且不对其应用任何代码示例样式。我不希望有一个可供选择的语言列表，也不希望将整个代码文本视为一个必须整体删除的块。

关于如何做到这一点的任何想法？

Answer 1

如果我理解您的问题，您希望有人可以在其中粘贴一些 HTML 的对话框，并且您将在将内容插入编辑器时将其包装在 <pre> 和 </pre> 标记中。

TinyMCE 中没有一个插件可以完全满足您的需求。您是正确的，codesample 插件比这更复杂（它使用称为 Prism.js 的东西来处理语法着色和突出显示）。

您可以做以下两件事之一：

• 看看像codesample和template这样的插件如何创建他们的对话框（他们使用windowManager）然后你可以制作你自己的插件来接受用户的输入并将它包装在<pre>和</pre>标签中因为它被插入到编辑器中。
• 通过 TinyMCE 初始化添加一个工具栏按钮或菜单项，并让该代码打开一个对话框（通过windowManager）并将内容插入编辑器。

如果您更喜欢第一个选项，使用 TinyMCE 的现有模板之一作为起点将节省您一点编码时间，并向您展示如何使用 windowManager 的一个很好的示例。

这是一个过于简单的示例，说明如何在 init 中使用 windowManager：

 tinymce.init({
    ...  
    setup: function (editor) {
        editor.addButton('insertusername', {
            text: 'Insert User Name',
            icon: false,
            onclick: function () {
                var person = {
                    firstname: '',
                    lastname: ''
                };
                editor.windowManager.open({
                    title: 'Insert User Name - Custom Dialog',
                    body: [
                        {
                            type: 'textbox',
                            name: 'firstname',
                            label: 'First Name:',
                            value: '',
                            minWidth: 800,
                            value: person.firstname,
                            oninput: function() {
                                person.firstname = this.value();
                            }
                        },
                        {
                            type: 'textbox',
                            name: 'lastname',
                            label: 'Last Name',
                            value: '',
                            minWidth: 800,
                            value: person.lastname,
                            oninput: function() {
                                person.lastname = this.value();
                            }
                        }
                    ],
                    onsubmit: function(e) {
                        // console.log('onSubmit called');
                        editor.insertContent('<span class="abc">'+ person.firstname + ' ' + person.lastname + '</span> ');
                    }
                });
            }
        }
    }
    ...
});