tinymce系列（二） tinymce 插件开发

Jioho 1/8/2022 tinymce富文本

# tinymce 插件开发

前面一篇文章已经介绍了 tinymce 的环境搭建，其实就是为了 tinymce 插件开发做的铺垫
仓库代码：https://gitee.com/Jioho/tinymce-plugins (opens new window)
后面开发的 API 都以 5.x 版本为主（现在出到 6.x 了）主要是公司用的也是 5.x~

# tinymce 插件代码编写风格

以 hr (opens new window) 插件为示例

代码风格总结如下，供参考（非标准，文档也并没有说明代码风格问题）：

只有一个 function 函数即为 Plugin
入口方法也是 Plugin
通常都会有 Buttons、Commands 等作为模块划分，归纳相关的方法
按钮名通常与插件同名

精简代码如下：

;(function() {
  'use strict'

  // 通过 tinymce.util.Tools.resolve 加载 tinymce 的模块
  var global = tinymce.util.Tools.resolve('tinymce.PluginManager')

  var register = function(editor) {
    // 相关的业务逻辑
    editor.addCommand('InsertHorizontalRule', function() {})
  }
  var Commands = { register: register }

  var register$1 = function(editor) {
    // 按钮相关的业务逻辑
    editor.ui.registry.addButton('hr', {...})
    editor.ui.registry.addMenuItem('hr', {...})
  }
  var Buttons = { register: register$1 }

  function Plugin() {
    // global 其实是 PluginManager
    // 通过 add 把当前 hr 插件注册到 tinymce 插件中
    global.add('hr', function(editor) {
      // 注册公共方法
      Commands.register(editor)
      // 注册 toolbar 的按钮
      Buttons.register(editor)
    })
  }

  // 插件加载后唯一执行的方法
  Plugin()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 插件开发文件规范

# 存放目录问题

存放插件目录都在 src/js/tinymce/plugins 下。其中 src/js/tinymce 为下载回来后的 tinymce 的源码包

以我的参考为例 tinymce 开发插件目录

# 插件文件夹命名规范

在 plugins 目录下，新建一个 my_plugin 文件夹，那么 my_plugin 就是这个插件包的包名
在 tinymce 初始化配置中 plugins 配置项填写的就是需要引入的包名

tinymce.init({
  selector: 'textarea.tinymce',
  plugins: 'my_plugin'
})

1
2
3
4

# 插件命名规范

在对应的包名下，tinymce 只加载 plugin.js 和 plugin.min.js
加载规则如下：在业务逻辑页面如果引入的是 tinymce.js 则加载对应插件的 plugin.js 文件
如果引入的为 tinymce.min.js 则加载对应插件的 plugin.min.js 文件

# 最后

这部分简单介绍了一下 tinymce 插件开发的文件规范和代码风格一致规范，下一章就是 tinymce 常用 API 介绍，正式上手 tinymce 插件开发！

Jioho 的博客

Choose mode