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

Add <pre> tag button in TinyMce 4

本文关键字：标签 按钮 gt lt pre 添加 TinyMce      更新时间：2024-02-11

我打算将代码添加到一个tinymce文本区域，并计划使用highlight.js 进行高亮显示

为了做到这一点，我只需要将代码包装在标签<pre></pre>和highlight.js之间

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

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

有什么办法吗？

如果我理解你的问题，你想要一个对话框，有人可以在其中粘贴一些HTML，当你将内容插入编辑器时，你会将其包装在<pre>和</pre>标记中。

TinyMCE中没有一个插件可以满足您的需求。你是对的，代码示例插件比这更复杂（它使用一种名为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> ');
                    }
                });
            }
        }
    }
    ...
});
相关文章：