## 常用内置 UI 组件这篇文章将会介绍常用的内置 UI 组件，对于下面的示例代码，很多都用到了一个 `editor` 的变量。注意 editor 是当前的实例，而非全局变量，如需要使用全局变量改用 tinymce.activeEditor editor 通常来自 `PluginManager.add` 注册插件后，回调参数中会携带 editor 实例 ### 注册工具条上的按钮 [`editor.ui.registry.addButton('按钮名称', 按钮参数)`](https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton) 按钮名称同于 tinymce.init 中的 toolbar 注册的名称 ```js editor.ui.registry.addButton('mybutton', { icon: 'formaticon', // tinymce 内置的icon名称（下面会介绍到） tooltip: '新增按钮示例', // 悬浮的时候的提示 onAction: function(e) { alert('点击了这个按钮') } }) ``` ### 注册下拉菜单按钮除了普通按钮，用的比较多的就是下拉菜单的按钮 [addmenubutton](https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addmenubutton) 以下示例代码来自：[menubuttonexampleandexplanation](https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubuttonexampleandexplanation) - fetch 提供一个回调函数，用于`生成按钮点击后显示的下拉菜单项` - 每个菜单项又有各自的配置 - text 显示的文案 - icon - onAction 点击后触发的事件 - onSetup 当前菜单 mounted 后触发 - getSubmenuItems 当前项在添加子级菜单 - type 菜单类型更多类型可以看 [typesoftoolbarbuttons](https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/) ```js 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(' You clicked menu item 1!') } }, { type: 'nestedmenuitem', text: 'Menu item 2', icon: 'user', getSubmenuItems: function() { return [ { type: 'menuitem', text: 'Sub menu item 1', icon: 'unlock', onAction: function() { editor.insertContent(' You clicked Sub menu item 1!') } }, { type: 'menuitem', text: 'Sub menu item 2', icon: 'lock', onAction: function() { editor.insertContent(' You clicked Sub menu item 2!') } } ] } }, { type: 'togglemenuitem', text: 'Toggle menu item', onAction: function() { toggleState = !toggleState editor.insertContent(' You toggled a menuitem ' + (toggleState ? 'on' : 'off') + '') }, onSetup: function(api) { api.setActive(toggleState) return function() {} } } ] callback(items) } }) ``` 除了上面用 `callback` 返回菜单配置外，菜单项也可以通过名称单独添加，然后 `callback` 只需要传入菜单名称即可比如： ```js // 单独注册名为 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()` ```js let icons = editor.ui.registry.getAll().icons let formaticon = icons.formaticon // 如果存在，拿到的就是 svg 代码 ``` 2. 注册新 icon - 注册后的 icon 可以通过 getAll().icon 名称获取到 - 在部分组件比如上面的按钮的 icon 配置中，则可以直接使用 icon:'icon 名称' 进行引入这个图标 ```js editor.ui.registry.addIcon('myicon', '') // 使用时：比如注册一个工具栏的按钮 editor.ui.registry.addButton('mybutton', { icon: 'myicon', tooltip: '新注册的按钮组件' }) ``` ### 使用内置的弹窗组件文档参考：[windowmanager](https://www.tiny.cloud/docs/api/tinymce/tinymce.windowmanager/) 调用 open 方法会会返回一个 dialog 对象，用于对弹窗做一些操作，比如关闭弹窗 `dialog.close()` 弹窗的底部按钮目前看到有 3 种类型 | type | 类型 | 触发事件 | | :----- | :------- | :------- | | custom | 普通按钮 | onAction | | cancel | 取消按钮 | onCancel | | submit | 确认按钮 | onSubmit | 如果按钮业务类型比较多，建议使用 custom 按钮，通过 `name` 参数作为区分，name 参数会在 onAction 的 params 参数中一同携带 primary 主要是按钮的类型，如果为 true，则为有底色按钮，默认是白色底按钮 ```js 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，都会重新用到这一块的内容~敬请期待