如何为编辑器菜单栏项添加图标？（含配置示例及尝试说明）

默认TinyMCE的菜单配置里确实没有icon选项，你可以通过以下两种方法实现需求：

方法1：CSS注入图标 #

通过CSS选择器定位自定义菜单按钮，用伪元素或背景图添加图标，这是最简单的实现方式。

步骤： #

1. 定位目标元素：TinyMCE 5+版本中，菜单栏按钮类为tox-menubar__button，可通过title属性精准定位你的"Custom"菜单。
2. 编写自定义CSS样式（示例用内联SVG，也可替换为图片URL或字体图标）：

/* 自定义菜单图标样式 */
.tox-menubar__button[title="Custom"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  /* 替换为你需要的SVG图标 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

3. 将样式引入页面：可以直接添加到项目全局样式中，也通过TinyMCE的content_css配置加载：

const editorInitConfig = {
  // ...
  content_css: ['path/to/your/custom-styles.css'],
  // ...
};

方法2：通过Setup钩子动态修改DOM #

如果需要更灵活的控制，可在编辑器初始化完成后，用JS动态插入图标元素。注意SVG需使用命名空间创建，否则浏览器无法正确渲染。

const editorInitConfig = {
  // ...
  menubar: "file edit view insert format table custom",
  menu: {
    // ...
    custom: {
      title: "Custom",
      items: "...",
    },
  },
  setup: (editor) => {
    editor.on('init', () => {
      // 定位自定义菜单按钮
      const customBtn = document.querySelector('.tox-menubar__button[title="Custom"]');
      if (!customBtn) return;

      // 创建SVG图标元素
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('viewBox', '0 0 24 24');
      svg.setAttribute('width', '16');
      svg.setAttribute('height', '16');
      svg.style.marginRight = '4px';
      svg.style.verticalAlign = 'middle';

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z');
      svg.appendChild(path);

      // 将图标插入按钮文本前方
      customBtn.insertBefore(svg, customBtn.firstChild);
    });
  },
  // ...
};

你之前注入SVG失败的可能原因： #

• 在编辑器初始化完成前就尝试修改DOM，此时菜单按钮还未生成；
• 创建SVG时未使用createElementNS指定命名空间，导致浏览器无法解析；
• 选择器错误，比如误用了旧版本TinyMCE的类名（如mce-menubar-item而非tox-menubar__button）。

内容的提问来源于stack exchange，提问作者Christian Garrison