TinyMCE 富文本编辑器 ━━ 自定义插件 [原创]

自定义插件

使用 TinyMCE 提供的 API 自定义自己的插件，本文内容应该在完成 TinyMCE 的其它内容后再介绍，但由于个人原因需自定义 TinyMCE 的插件，所以就一边开发一边记录，以免以后忘记。

创建文件夹

在 TinyMCE 的 /tinymce/plugins/ 文件夹下创建一个自己的文件夹，例如: `article`

创建 JS 文件

然后在刚才创建的文件夹下创建一个 `plugin.min.js` 文件

完成上面步骤之后只需要在 js 文件里添加内容即可完成自己的插件

其实自定义一个插件就以下几个步骤：

1. 获取 tinymce 的插件管理对象 `tinymce.PluginManager`
2. 注册命令 `editor.addCommand()`
3. 注册按钮和菜单栏 `editor.addButton()` , `editor.addMenuItem()`
4. 添加插件到 `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 = '<article><section><div></div></section></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

如果需要转载请标明出处: eesion.com

谢谢。