vue中使用TinyMCE富文本框（重写图片上传插件）

       目前，适用于vue的几个比较大的富文本框编辑器主要有Quill，wangEditor，TinyMCE等等，其他的编辑器的社区环境相对没那么完善，大影响产品的稳定性、扩展性。到时候啥啥都实现不了，哪儿哪儿都有问题，会被 PM 鄙视：“人家 xxx 咋能行。其次，实际开发环境中最关键的一步就是二次开发，自定义开发(不是每个产品都是人)，因此选择社区较大的富文本插件将会省下很多时间。

TinyMCE

　　TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

优势：

• 官方文档：tinymce.ax-z.cn/
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 官方中文语言包：tinymce.ax-z.cn/static/tiny…　

demo

tinymce.init({
    selector: '#tinydemo', //容器，可使用css选择器
    language:'zh_CN', //调用放在langs文件夹内的语言包
    toolbar: false, //隐藏工具栏
    menubar: false, //隐藏菜单栏
    inline: true, //开启内联模式
    plugins: [ 'quickbars','link','table' ], //选择需加载的插件
    //选中时出现的快捷工具，与插件有依赖关系
    quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
});

自定义插件

ax_wordlimit —— 字数限制插件

• 下载插件：ax_wordlimit.zip
• 使用方法：将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
• 作用：这是一个实时判断编辑器文字超过设定后触发回调的插件。

简单说就是：当超过字数限制后执行一个自定义函数。（没错，机智的我将这个限制动作甩给了你们！）

限制字数demo

tinymce.init({
    selector: '#tinydemo',
    plugins: "code ax_wordlimit",
    toolbar: "code",
    ax_wordlimit_num:40,
    ax_wordlimit_callback: function(editor,txt,num){
        tipsJS('当前字数：' + txt.length + '，限制字数：' + num);
    }
});

图片上传

要使TinyMCE能够上传图片，需要如下几步：

第1步：上传图片，首先要启用图片插件

在plugins参数中把image加进去。

第2步：在工具栏显示图片工具按钮

在toolbar参数中把image加进去。

此时，点图片按钮是没有上传选项的，只能添加图片地址。

第3步：加入配置参数images_upload_url

此参数用于指定一个接受上传文件的后端处理程序地址，例如：

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

最后如下方示例:

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
});

在项目应用中，会经常使用图片上传插件。但是并不能满足所有的业务需求，因此我使用原生js结合富文本框暴露出来的api，重写了一个自定义上传图片插件。

首先，我们了解一下几个重要的api：

setup

registrationEssential编辑器配置

顾名思义这是跟plugins以及language同级的一个富文本框配置项。

registrationEssential编辑器配置，包括“选择器”和“插件”键。此选项允许您指定将在呈现TinyMCE编辑器实例之前执行的回调。

要指定设置回调，请提供带有JavaScript函数的设置选项。此函数应该有一个参数，它是对正在设置的编辑器的引用。

此设置的一个常见用例是向TinyMCE添加编辑器事件。例如，如果您想向TinyMCE添加单击事件，则可以通过设置配置设置添加它。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  setup: function (editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
});

tinymce.editor.ui.Registry

在setup配置项中，设置有参数的回调函数，此处的参数就是富文本框实例，可通过此实例使用挂载在它身上的函数和属性。

addButton(name:String, obj:Toolbar.ToolbarButtonSpec):void

注册一个新的工具栏按钮，该按钮在通过键盘导航控件单击或激活时执行命令。

自定义图片插件源码

const image_t = (editor) => {
    editor.ui.registry.addButton("image-t", {
        // text: "上传图片",
        icon: "image",
        onAction: () => {
            const dialogConfig = {
                title: "上传图片",
                body: {
                    type: "panel",
                    items: [{
                        type: "dropzone",
                        name: "fileinput",
                    }, ],
                },
                buttons: [],
                onChange(api) {
                    api.block("上传中……");
                    let file = api.getData().fileinput[0]; // 获取FileReader实例
                    const formdata = new FormData()
                    formdata.append('file', file)
                    //发请求
                    axios(parmas).then(res => {
                        api.setData({ src: { value: res.url, meta: {} } })
                        editor.execCommand(
                             "mceInsertContent",
                             false,
                            `<div><img src=${img} alt='请删除无效图片'/></div>`
                         );
                    })
                    api.unblock();
                    api.close();
                },
            };
            editor.windowManager.open(dialogConfig);
        },
    })};