如何向菜单栏项目添加图标？

Question

const editorInitConfig = {
  // ...
  menubar: "file edit view insert format table custom",
  menu: {
    // ...
    custom: {
      // icon: "emoji", this option does not exist
      title: "Custom",
      items: "...",
    },
  },
  // ...
};

我尝试了一些自定义注入，但没有成功，我尝试在编辑器在页面上初始化后注入 SVG。

Answer 1

title

和

items

是

menu

选项支持的唯一属性。覆盖编辑器 CSS 规则既不推荐也不可靠，但这是可能的。

例如，

的第三项（

custom

）

{
  menubar: "file edit custom"
}

可以使用

.tox-menubar .tox-mbtn:nth-of-type(3)

 选择 

，并且可以为其 background 标签设置

svg

span

：

.tox-menubar .tox-mbtn:nth-of-type(3) > span:first-child {
  padding-left: 24px;
  background: 0 center no-repeat url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA2NCA2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIyNy43NTgiIHN0eWxlPSJmaWxsOiNmOWJmNDQiLz48cGF0aCBkPSJNMzIgNDUuMTY1YTEyLjU4IDEyLjU4IDAgMCAxLTExLjM2OC03LjA3OSAxIDEgMCAxIDEgMS43OTUtLjg4MiAxMC42NjcgMTAuNjY3IDAgMCAwIDE5LjE0NiAwIDEgMSAwIDEgMSAxLjc5NS44ODJBMTIuNTggMTIuNTggMCAwIDEgMzIgNDUuMTY1IiBzdHlsZT0iZmlsbDojMzgyYTEyIi8+PGVsbGlwc2UgY3g9IjIxLjAwMyIgY3k9IjI5Ljc0NSIgcng9IjIuNSIgcnk9IjIuODciIHN0eWxlPSJmaWxsOiMzODJhMTIiLz48ZWxsaXBzZSBjeD0iNDIuOTk3IiBjeT0iMjkuNzQ1IiByeD0iMi41IiByeT0iMi44NyIgc3R5bGU9ImZpbGw6IzM4MmExMiIvPjwvc3ZnPg==");
}

使用当前的 TinyMCE 7，修改后的菜单应类似于：

.tox-menubar {
  font-size: 0;
}

.tox-mbtn {
  font: 14px sans-serif;
  background: white;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  height: 28px;
}

.tox-mbtn:hover {
  background: #ddd;
}

.tox-mbtn:active {
  background: #a6ccf7;
}

.tox-mbtn__select-chevron {
  display: none;
}

.tox-menubar .tox-mbtn:nth-of-type(3)>span:first-child {
  padding-left: 24px;
  background: 0 center no-repeat url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA2NCA2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIyNy43NTgiIHN0eWxlPSJmaWxsOiNmOWJmNDQiLz48cGF0aCBkPSJNMzIgNDUuMTY1YTEyLjU4IDEyLjU4IDAgMCAxLTExLjM2OC03LjA3OSAxIDEgMCAxIDEgMS43OTUtLjg4MiAxMC42NjcgMTAuNjY3IDAgMCAwIDE5LjE0NiAwIDEgMSAwIDEgMSAxLjc5NS44ODJBMTIuNTggMTIuNTggMCAwIDEgMzIgNDUuMTY1IiBzdHlsZT0iZmlsbDojMzgyYTEyIi8+PGVsbGlwc2UgY3g9IjIxLjAwMyIgY3k9IjI5Ljc0NSIgcng9IjIuNSIgcnk9IjIuODciIHN0eWxlPSJmaWxsOiMzODJhMTIiLz48ZWxsaXBzZSBjeD0iNDIuOTk3IiBjeT0iMjkuNzQ1IiByeD0iMi41IiByeT0iMi44NyIgc3R5bGU9ImZpbGw6IzM4MmExMiIvPjwvc3ZnPg==");
}

<div role="menubar" data-alloy-tabstop="true" class="tox-menubar">
  <button aria-haspopup="true" role="menuitem" type="button" tabindex="-1" data-alloy-tabstop="true" unselectable="on" class="tox-mbtn tox-mbtn--select" style="user-select: none; width: 37.95px;" aria-expanded="false">
    <span class="tox-mbtn__select-label">File</span>
    <div class="tox-mbtn__select-chevron">...</div>
  </button>
  <button aria-haspopup="true" role="menuitem" type="button" tabindex="-1" data-alloy-tabstop="true" unselectable="on" class="tox-mbtn tox-mbtn--select" style="user-select: none; width: 39.7167px;" aria-expanded="false">
    <span class="tox-mbtn__select-label">Edit</span>
    <div class="tox-mbtn__select-chevron">...</div>
  </button>
  <button aria-haspopup="true" role="menuitem" type="button" tabindex="-1" data-alloy-tabstop="true" unselectable="on" class="tox-mbtn tox-mbtn--select" style="user-select: none; width: 88.7833px;" aria-expanded="false">
    <span class="tox-mbtn__select-label">Custom</span>
    <div class="tox-mbtn__select-chevron">...</div>
  </button>
</div>