tinymce系列（四） tinymce 常用内置 UI 组件介绍

常用内置 UI 组件

这篇文章将会介绍常用的内置 UI 组件，对于下面的示例代码，很多都用到了一个 editor 的变量。 注意 editor 是当前的实例，而非全局变量，如需要使用全局变量改用 tinymce.activeEditor
editor 通常来自 PluginManager.add 注册插件后，回调参数中会携带 editor 实例

注册工具条上的按钮

editor.ui.registry.addButton('按钮名称', 按钮参数) (opens new window)

按钮名称同于 tinymce.init 中的 toolbar 注册的名称

editor.ui.registry.addButton('mybutton', {
  icon: 'formaticon', // tinymce 内置的icon名称（下面会介绍到）
  tooltip: '新增按钮示例', // 悬浮的时候的提示
  onAction: function(e) {
    alert('点击了这个按钮')
  }
})

注册下拉菜单按钮

除了普通按钮，用的比较多的就是下拉菜单的按钮 addmenubutton (opens new window)

以下示例代码来自：menubuttonexampleandexplanation (opens new window)

• fetch 提供一个回调函数，用于生成按钮点击后显示的下拉菜单项
• 每个菜单项又有各自的配置
  • text 显示的文案
  • icon
  • onAction 点击后触发的事件
  • onSetup 当前菜单 mounted 后触发
  • getSubmenuItems 当前项在添加子级菜单
  • type 菜单类型 更多类型可以看 typesoftoolbarbuttons (opens new window)

editor.ui.registry.addMenuButton('mybutton', {
  tooltip: 'My button',
  icon: 'my-icon',
  fetch: function(callback) {
    var items = [
      {
        type: 'menuitem',
        text: 'Menu item 1',
        onAction: function() {
          editor.insertContent('&nbsp;<em>You clicked menu item 1!</em>')
        }
      },
      {
        type: 'nestedmenuitem',
        text: 'Menu item 2',
        icon: 'user',
        getSubmenuItems: function() {
          return [
            {
              type: 'menuitem',
              text: 'Sub menu item 1',
              icon: 'unlock',
              onAction: function() {
                editor.insertContent('&nbsp;<em>You clicked Sub menu item 1!</em>')
              }
            },
            {
              type: 'menuitem',
              text: 'Sub menu item 2',
              icon: 'lock',
              onAction: function() {
                editor.insertContent('&nbsp;<em>You clicked Sub menu item 2!</em>')
              }
            }
          ]
        }
      },
      {
        type: 'togglemenuitem',
        text: 'Toggle menu item',
        onAction: function() {
          toggleState = !toggleState
          editor.insertContent('&nbsp;<em>You toggled a menuitem ' + (toggleState ? 'on' : 'off') + '</em>')
        },
        onSetup: function(api) {
          api.setActive(toggleState)
          return function() {}
        }
      }
    ]
    callback(items)
  }
})

除了上面用 callback 返回菜单配置外，菜单项也可以通过名称单独添加，然后 callback 只需要传入菜单名称即可

比如：

// 单独注册名为 menuname 的菜单项
editor.ui.registry.addToggleMenuItem('menuname', {
  text: 'menuname',
  onSetup: function(api) {
    // ...
  }
})

// 单独注册名为 menuname2 的菜单项
editor.ui.registry.addToggleMenuItem('menuname2', {
  text: 'menuname2',
  onSetup: function(api) {
    // ...
  }
})

// 在下拉菜单按钮中使用上面注册的2个菜单项
editor.ui.registry.addMenuButton('mybutton', {
  fetch: function(callback) {
    // 直接使用菜单名称注册
    callback('menuname menuname2')
  }
})

如果下拉菜单的样式并不满足业务需求，可以使用 onSetup 的方法，对当前的菜单进行 dom 节点的改造，达到想要的效果。

注册按钮图标 icon

在 tinymce4.x 版本中，icon 支持直接图片链接地址/svg，在 tinymce5.x 版本后不允许使用图片地址，必须使用 svg 。通过 api 可以注册新的 icon

1. 获取所有的 icon editor.ui.registry.getAll()

let icons = editor.ui.registry.getAll().icons

let formaticon = icons.formaticon // 如果存在，拿到的就是 svg 代码

2. 注册新 icon

• 注册后的 icon 可以通过 getAll().icon 名称 获取到
• 在部分组件比如上面的按钮的 icon 配置中，则可以直接使用 icon:'icon 名称' 进行引入这个图标

editor.ui.registry.addIcon('myicon', '<svg>省略。。。</svg>')

// 使用时：比如注册一个工具栏的按钮
editor.ui.registry.addButton('mybutton', {
  icon: 'myicon',
  tooltip: '新注册的按钮组件'
})

使用内置的弹窗组件

文档参考：windowmanager (opens new window)

调用 open 方法会会返回一个 dialog 对象，用于对弹窗做一些操作，比如关闭弹窗 dialog.close()

弹窗的底部按钮目前看到有 3 种类型

type	类型	触发事件
custom	普通按钮	onAction
cancel	取消按钮	onCancel
submit	确认按钮	onSubmit

如果按钮业务类型比较多，建议使用 custom 按钮，通过 name 参数作为区分，name 参数会在 onAction 的 params 参数中一同携带

primary 主要是按钮的类型，如果为 true，则为有底色按钮，默认是白色底按钮

var WindowManager = tinymce.activeEditor.windowManager

let dialog = WindowManager.open({
  title: '一个弹窗',
  body: {
    type: 'panel',
    items: [
      {
        type: 'htmlpanel',
        html: getFormHtml() // getFormHtml 就是返回一段html字符串
      }
    ]
  },
  buttons: [
    {
      type: 'custom',
      text: '取消',
      name: 'cancel'
    },
    {
      type: 'custom',
      text: '普通按钮1',
      primary: true,
      name: 'splash_1'
    },
    {
      type: 'custom',
      text: '普通按钮2',
      primary: true,
      name: 'splash_2'
    },
    {
      type: 'cancel',
      text: '取消按钮',
      primary: true
    },
    {
      type: 'submit',
      text: '确定',
      primary: true
    }
  ],
  onAction: function(e, params) {
    console.log(params.name)
    dialog.close()
  },
  onCancel: function() {
    dialog.close()
  },
  onSubmit: function() {
    dialog.close()
  }
})

最后

tinymce 要用到的内置组件展示没有那么多，本文做一个抛砖引玉，介绍了最基础的注册按钮、下拉菜单、注册 icon 和内置弹窗的使用。后面还会有几个实战的小 demo，都会重新用到这一块的内容~敬请期待