tinymce 官方插件如何显示图标文字？

Question

我想让 tinymce 编辑器默认的组件，比如：复制、粘贴、撤销等功能

像自定义功能一样显示图标下的文字，如下图这样

请问有没有办法实现呢？还望解答，万分感谢！

Answer 1

TinyMCE 官方插件的图标文字通常是通过 CSS 样式和图标字体来控制的。如果你希望显示默认组件（如复制、粘贴、撤销等）下的文字，可以通过修改 TinyMCE 的 CSS 样式来实现。

以下是一种可能的方法：

1. 修改 TinyMCE 样式表：你可以通过修改 TinyMCE 的样式表来添加图标下方的文字。这通常涉及到编辑 TinyMCE 的 CSS 文件，在其中添加或修改对应的样式规则。
2. 使用自定义按钮：另一种方法是使用 TinyMCE 的自定义按钮功能。你可以创建一个自定义的按钮，其中包含了图标和文字。然后，你可以将这个自定义按钮添加到 TinyMCE 编辑器的工具栏中。

以下是一个简单的示例，展示了如何为 TinyMCE 编辑器添加一个自定义按钮，其中包含了图标和文字：

tinymce.init({  selector: 'textarea',  setup: function(editor) {    editor.ui.registry.addButton('custombutton', {      icon: 'your-icon-class', // 使用你的图标类名      text: 'Custom Button', // 按钮上的文字      onAction: function() {        // 按钮点击时的操作      }    });    editor.ui.registry.addMenuItem('custommenuitem', {      text: 'Custom Menu Item', // 菜单项的文字      onAction: function() {        // 菜单项点击时的操作      }    });    editor.ui.registry.addToolbarGroup('customtoolbargroup', {      label: 'Custom',      order: 999, // 自定义工具栏组的顺序      items: 'custombutton custommenuitem' // 在工具栏组中添加的按钮和菜单项    });  }});

请注意，你需要根据你的实际需求来修改上述代码中的 icon、text、onAction 等属性。此外，你还需要确保你的 CSS 文件中包含了正确的图标类（your-icon-class）和样式。

希望这可以帮助你实现所需的功能！如有任何进一步的问题，请随时提问。