TinyMCE 富文本编辑器 ━━ 自定义插件 [转载]

最新tinymce6的插件开发总结已经发布:https://blog.csdn.net/snans/article/details/128917094

之前编写过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 = '<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,于2018.9.28撰写,感谢作者分享。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值