本文共 3708 字，大约阅读时间需要 12 分钟。
之前编写过tinymce的上传插件，但时间过久了，有点忘记怎么弄了，最近客户需求带有排版功能的插件，没辙了，先转载一篇自定义插件的文章回忆一下，下次再把自己的插件总结好了分享一下。
自定义插件
使用 TinyMCE 提供的 API 自定义自己的插件，本文内容应该在完成 TinyMCE 的其它内容后再介绍，但由于个人原因需自定义 TinyMCE 的插件，所以就一边开发一边记录，以免以后忘记。创建文件夹
在 TinyMCE 的 /tinymce/plugins/ 文件夹下创建一个自己的文件夹，例如:article 创建 JS 文件
然后在刚才创建的文件夹下创建一个plugin.min.js 文件 完成上面步骤之后只需要在 js 文件里添加内容即可完成自己的插件
其实自定义一个插件就以下几个步骤：
获取 tinymce 的插件管理对象 tinymce.PluginManager
editor.addCommand() 注册按钮和菜单栏 editor.addButton() , editor.addMenuItem() 添加插件到 tinymce.PluginManager 对象 global.add() 首先是获取插件管理对象 // 获取插件管理对象var global = tinymce.util.Tools.resolve('tinymce.PluginManager'); 然后需要注册命令
// 这个方法里面完成自己的业务逻辑var insertArticle = function(editor) { }var $_ijkl = { insertArticle: insertArticle }; // 变量的名字是瞎写的// 定义插件功能var register = function (editor) { editor.addCommand('mceArticle', function () { $_ijkl.insertArticle(editor); });};var $_abcd = { register: register };// 注册命令var register = function (editor) { editor.addCommand('mceArticle', function () { $_ijkl.insertArticle(editor); });};var $_abcd = { register: register }; // 变量的名字是瞎写的 添加按钮和菜单栏
// 添加插件的 button 和 菜单栏var register$1 = function (editor) { editor.addButton('article', { title: 'Article', cmd: 'mceArticle', icon: 'article' }); editor.addMenuItem('article', { text: 'Article', cmd: 'mceArticle', icon: 'article' });};var $_efgh = { register: register$1 }; 添加插件到 tinymce..PluginManager 对象
// 注册插件到 tinymce 对象global.add('article', function (editor) { $_abcd.register(editor); $_efgh.register(editor);}); 将上面的代码添加到 plugin.min.js 文件中之后基本就完成了一个插件
以下是一个插件的完整代码示例：
(function() { var article = (function() { 'use strict'; // 开启严格模式 // 获取 tinymce 插件管理对象 var global = tinymce.util.Tools.resolve('tinymce.PluginManager'); var global$1 = tinymce.util.Tools.resolve('tinymce.dom'); var insertArticle = function(editor) { // 插入一个段落，首先需要设置光标的位置 // 这里将光标定位到编辑器的末尾 editor.selection.setCursorLocation(editor.getBody(), editor.getBody().childElementCount); var article = ' '; // 插入内容 editor.insertContent(article); } var $_ijkl = { insertArticle: insertArticle }; // 定义插件功能 var register = function (editor) { editor.addCommand('mceArticle', function () { $_ijkl.insertArticle(editor); }); }; var $_abcd = { register: register }; // 添加插件的 button 和 菜单栏 var register$1 = function (editor) { editor.addButton('article', { title: 'Article', cmd: 'mceArticle', icon: 'article' // 这个是按钮的样式，可以在 skins 文件夹下的 skin.min.css 中添加样式，如：.mce-i-article:before{ content: 'A'; } }); editor.addMenuItem('article', { text: 'Article', cmd: 'mceArticle', icon: 'article' }); }; var $_efgh = { register: register$1 }; // 注册插件到 tinymce 对象 global.add('article', function (editor) { $_abcd.register(editor); $_efgh.register(editor); }); // 这个地方不知道干啥的, 删除掉也不会报错。目前先保留 function Plugin () {} return Plugin; }());})(); 在编辑器中使用
tinymce.init({ selector: '#t1', width: 800, height: 400, menu: {view: {title: '插入', items: 'article'}}, toolbar: 'article', plugins: 'article',}); 在最新的 5.x 版本中，自定义插件时有部分 api 有变动，比如：editor.addButton 这个 api，在 5.0 版本开始，使用 editor.ui.registry.addButton 代替，并且添加不同类型的按钮有不同的 api，具体请看官方文档：https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry
原文转载自: ，于2018.9.28撰写，感谢作者分享。