将样式添加到TinyMCE 5中的自定义菜单项

问题描述

我想在TinyMCE 5中为自定义菜单项添加一些样式。可以向该项添加CSS类还是可以添加某些内联样式？

以下是创建自定义菜单项的基本代码的小提琴-因为它似乎在这里不起作用：

https://jsfiddle.net/bhdwtp3m/

tinymce.init({
  selector: '#mytextarea',menu: {
        custom: { title: 'Custom Menu',items: 'undo redo myCustomMenuItem' }
    },menubar: "file | edit | custom",setup: function (editor) {
        editor.ui.registry.addMenuItem('myCustomMenuItem',{
            type: 'menuitem',text: 'Custom menu item',});
    }
});

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<textarea id="mytextarea">Hello,World!</textarea>

解决方法

很抱歉，但是在TinyMCE中没有支持通过添加类或ID来设置单个工具栏按钮样式的方法。原因在于CSS的性质–恰如其名：级联...如果TinyMCE CSS发生更改，它将渗入任何第三方UI，有可能破坏它。有时我们还需要更改UI组件的DOM结构。

尽管许多开发人员确切地知道如何处理此问题，但仍有许多开发人员会绞尽脑汁。另外，我们有大量客户在我们的云上运行TinyMCE，因此始终运行最新版本。如果他们采用这种自定义样式，TinyMCE可能会在没有警告的情况下破坏它们，而我们无法做到这一点。

如果您知道自己在做什么，我建议调查CSS伪类选择器，例如:nth-child()和:nth-of-type()