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

最新推荐文章于 2024-08-21 23:30:00 发布

原创

最新推荐文章于 2024-08-21 23:30:00 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #富文本编辑器

本文介绍了tinymce编辑器中常用的内置UI组件，包括如何注册按钮、创建下拉菜单、自定义图标及使用内置弹窗。详细讲解了按钮配置、菜单结构和定制，适合初学者了解基础组件的使用方法。

常用内置 UI 组件

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

注册工具条上的按钮

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

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

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

注册下拉菜单按钮

除了普通按钮，用的比较多的就是下拉菜单的按钮 addmenubutton

以下示例代码来自：menubuttonexampleandexplanation

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

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>')
        }
      },<