Question

我只是想通过插件向TinyMCE编辑器添加一些按钮。这些按钮将具有与粗体/斜体/删除线按钮完全相同的功能，但是将用于HTML标签：<mark>和<ins>。

我可以重新使用这些现有按钮的代码，并以某种方式对其进行扩展以更改所插入的html标签吗？

我翻阅了GitHub repo，但找不到此功能的编写位置。我希望有一个我可以扩展的简单API。

我发现一些command identifiers看起来很有希望，例如mceInsertContent可以插入类似<hr />的简单内容，但是在所选文本周围插入标签没有任何作用。

Answer 1

您可以创建一个简单的工具栏按钮，通过向TinyMCE配置中添加一小段代码来包装带有其他信息的所选文本。

第1步：定义自定义按钮

您需要做的第一件事是创建一个自定义按钮（https://www.tiny.cloud/docs/ui-components/toolbarbuttons/）。代码看起来像这样：

editor.ui.registry.addButton('wrapselection', {
    text: 'Wrap Selection',
    onAction: function () {
        editor.insertContent("<mark>" + editor.selection.getContent() + "</mark>");
    }
});

您可以在TinyMCE配置的setup()函数中添加它。

步骤2：将按钮添加到工具栏

您的TinyMCE配置具有toolbar设置，该设置控制工具栏上出现的按钮。您需要将新的自定义按钮添加到工具栏：

toolbar: "wrapselection | code undo redo | bold italic | bullist numlist"

以下是TinyMCE提琴，显示了所有这些动作：http://fiddle.tinymce.com/lQgaab/2

如何为自定义按钮重用TinyMCE功能的粗体/斜体/删除线？

1 个答案: