使用场景

  • 为用户反复执行的一个操作或一系列操作创建快捷方式。

  • 为自定义行为创建按钮。

如何创建自定义菜单项

添加自定义菜单项的方法位于编辑器 API 的 UI Registry 部分 editor.ui.registry。该 API 提供了三种添加菜单项的方法：

  • editor.ui.registry.addMenuItem(identifier, configuration)

  • editor.ui.registry.addNestedMenuItem(identifier, configuration)

  • editor.ui.registry.addToggleMenuItem(identifier, configuration)

这些方法接受的两个参数为：

  • identifier - 按钮的唯一名称

  • configuration - 一个包含该按钮配置信息的对象。

使用 TinyMCE 配置的 setup 回调函数定义自定义工具栏按钮，并将其添加到编辑器中。该回调函数会针对每个初始化的编辑器实例自动调用。当回调函数接收到一个作为参数传入的编辑器实例引用时，就可以访问 UI Registry API。

添加自定义菜单项的示例

tinymce.init({
  selector: '#editor',
  menu: {
    custom: { title: '自定义菜单', items: 'undo redo myCustomMenuItem' }
  },
  menubar: 'file edit custom',
  setup: (editor) => {
    editor.ui.registry.addMenuItem('myCustomMenuItem', {
      text: '我的自定义菜单项',
      onAction: () => alert('菜单项已点击')
    });
  }
});
用于创建菜单项的 identifier 必须包含在 TinyMCE 配置的 menu 选项中，才能将其添加到菜单栏的菜单中。如果 menu 配置不正确，则不会将其添加到菜单栏的菜单中。

交互式示例

此示例展示了如何向新的“自定义”菜单添加一些简单的菜单项。

HTML

<textarea id="custom-menu-item">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">欢迎使用 TinyMCE 编辑器演示！</h2>
  <p>从上方的列表框中选择一个菜单项，它将在光标位置插入内容到编辑器中。</p>

  <h2>有问题或需要帮助？</h2>
  <ul>
    <li>我们的 <a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a> 是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？请尝试 Stack Overflow 上的 <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> 标签</a>。</li>
    <li>作为 <a href="https://www.tiny.cloud/pricing">TinyMCE 高级版计划</a> 的一部分，我们还提供企业级支持服务。</li>
  </ul>

  <h2>发现了 bug？</h2>
  <p>如果您认为自己发现了 bug，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建一个 issue，向开发人员报告该问题。</p>

  <h2>最后...</h2>
  <p>感谢您支持 TinyMCE！我们希望它能帮助您和您的用户创建出色的内容。<br/>
    TinyMCE 团队全体成员向您致以最诚挚的问候。</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#custom-menu-item',
  height: 500,
  toolbar: false,
  menubar: 'custom',
  menu: {
    custom: { title: '自定义菜单', items: 'basicitem nesteditem toggleitem' }
  },
  setup: (editor) => {
    let toggleState = false;

    editor.ui.registry.addMenuItem('basicitem', {
      text: '我的基本菜单项',
      onAction: () => editor.insertContent(`<p>这是从基本菜单插入的一些内容！</p>`)
    });

    editor.ui.registry.addNestedMenuItem('nesteditem', {
      text: '我的嵌套菜单项',
      getSubmenuItems: () => [
        {
          type: 'menuitem',
          text: '我的子菜单项',
          onAction: () => editor.insertContent(`<p>这是从子菜单项插入的一些内容！</p>`)
        }
      ]
    });

    editor.ui.registry.addToggleMenuItem('toggleitem', {
      text: '我的切换菜单项',
      onAction: () => {
        toggleState = !toggleState;
        editor.insertContent(`<p class="toggle-item">这是从切换菜单插入的一些内容！</p>`);
      },
      onSetup: (api) => {
        api.setActive(toggleState);
        return () => {};
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});