如何让TinyMCE字体样式菜单强制使用黑色字体而非内容定义颜色？

当TinyMCE编辑器处于深色背景+浅色文本的场景时，字体样式下拉菜单会继承内容的文本颜色，导致菜单文字难以辨认。可以通过以下两种方法强制设置菜单文字为黑色：

方法一：添加全局CSS覆盖样式 #

在页面的全局样式表中添加以下代码，直接强制修改TinyMCE菜单元素的文字颜色：

/* 强制TinyMCE字体样式菜单文字为黑色 */
.mce-menu .mce-menu-item-text,
.mce-listbox .mce-text {
    color: #000 !important;
}

!important用于确保该样式优先级高于TinyMCE的默认UI样式，避免被覆盖。

方法二：在TinyMCE初始化时注入样式 #

如果不想修改全局样式，可以在编辑器初始化的setup回调中动态注入样式：

tinymce.init({
  selector: 'textarea', // 你的编辑器选择器
  setup: function(editor) {
    editor.on('init', function() {
      const styleEl = document.createElement('style');
      styleEl.textContent = `
        .mce-menu .mce-menu-item-text,
        .mce-listbox .mce-text {
          color: #000 !important;
        }
      `;
      document.head.appendChild(styleEl);
    });
  },
  // 其他编辑器配置项...
});

说明 #

以上两种方法都是针对TinyMCE的UI组件样式进行修改，不会影响编辑区域内的内容样式，确保下拉菜单始终显示黑色文字，不受内容文本颜色的影响。

内容的提问来源于stack exchange，提问作者Yanick Rochon