整合tinymce工具栏按钮

整合效果

整合菜单栏，大致分为以下几种：

1.拆分工具栏

效果

实现方式

// 拆分工具栏代码
editor.ui.registry.addSplitButton('myButton', {
      text: 'My Button',
      icon: 'info',
      tooltip: 'This is an example split-button',
      onAction: () => editor.insertContent('<p>You clicked the main button</p>'),
      onItemAction: (api, value) => editor.insertContent(value),
      fetch: (callback) => {
        const items = [
          {
            type: 'choiceitem',
            icon: 'notice',
            text: 'Menu item 1',
            value: '&nbsp;<em>You clicked menu item 1!</em>'
          },
          {
            type: 'choiceitem',
            icon: 'warning',
            text: 'Menu item 2',
            value: '&nbsp;<em>You clicked menu item 2!</em>'
          }
        ];
        callback(items);
      }
    });

2.工具栏组

效果

实现方式

// An highlighted block
editor.ui.registry.addGroupToolbarButton('geshi', {
      icon: 'createBottom',
      tooltip: 'geshi',
      items: 'underline strikethrough subscript superscript backcolor forecolor',
      onSetup: stateToggleG1(editor)
 });

3. 菜单工具栏按钮

效果

实现方式

editor.ui.registry.addMenuButton('action', {
      //动作按钮组
      icon: 'g-action',
      tooltip: 'action',
      fetch: function (callback) {
        const items = [
          {
            type: 'menuitem',
            text: 'Rename',
            icon: 'edit-block',
            onAction: function () {
              alert('暂未开发')
            },
          },
          {
            type: 'menuitem',
            text: 'Branch',
            icon: 'branch',
            onAction: function () {
              alert('暂未开发')
            },
          },
        ];
        callback(items);
      },
    });

Tips

以上代码均为tinymce官方api，可以在引用tinymce的组件时的init变量中的setup函数中写入，也可以写在扩展文件plugin.js，通过插件引入，具体可以参考我另一篇引入自定义插件的文章。

最近准备整合一下所有的功能，我的个人github上面其实有开源的这部分功能，暂时还是私有未公开，后面我抽时间优化后会公开，感兴趣的可以持续关注下。