时间戳

首页 > 解决方案 > 如何将 TinyMCE 功能重新用于自定义按钮的粗体/斜体/删除线？

tinymce - 如何将 TinyMCE 功能重新用于自定义按钮的粗体/斜体/删除线？

问题描述

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

我可以重新使用这些现有按钮的代码并以某种方式扩展它以更改插入的 html 标记吗？

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

我发现了一些看起来很有希望的命令标识符，比如mceInsertContent可以插入一些简单的东西，比如一个<hr />，但不能在所选文本周围插入标签。

标签： tinymcetinymce-4tinymce-plugins

解决方案

您可以通过向 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>");
    }
});

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

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

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

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

这是一个 TinyMCE Fiddle，显示了所有这些操作： http: //fiddle.tinymce.com/lQgaab/2

推荐阅读