Question

I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using highlight.js

In order to to so, I just need to wrap the code between the tags <pre></pre> and highlight.js will do the rest.

I tried using the code plugin in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually nothing with that text. It only allows you to see the HTML code for it, which will basically just show the text between </p> tags.

I would prefer not to use codesample plugin because I just want to add the pre tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.

Any ideas of how to do this?

Answer 1

如果我理解了您的问题，您需要一个对话框，其中某人可以粘贴一些HTML，并在将内容插入编辑器时将其包含在<pre>和</pre>标记中。

TinyMCE中没有一个插件能够完全满足您的需求。你是正确的，codesample插件比那更复杂（它使用一些叫做Prism.js来处理语法着色和突出显示）。

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

看看像codesample和template这样的插件如何创建对话框（他们使用windowManager），然后您可以创建自己的插件来获取用户的输入和换行它插入到编辑器中的<pre>和</pre>标签中。
通过TinyMCE init添加工具栏按钮或菜单项，并让该代码打开一个对话框（通过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> ');
                    }
                });
            }
        }
    }
    ...
});

添加<pre> tag button in TinyMce 4

1 个答案: