tinyMCE富文本自定义工具

在我看来tinymce是一个很强大的编辑器，因为最近一直在学习这个工具的文档，使用方法等，学习到了很多，遇到的问题都要记录下来。然后产品又提了一个要求是需要在编辑器中添加自定义的工具，也就是说相当于要小小的二次开发一下，才能满足产品的需求。

一：自定义工具类型

既然要添加自定义的工具就需要知道如何添加工具，添加什么类型的工具。然后我又去扒拉文档了，看到了文档中有一个制作一个插件，仔细看了一下觉得有点麻烦，就想着能不能用其他的方法来重新自定义

中文文档中制作一个插件的内容在这里

然后就看到了这个属性：setup

英文文档 意思就是说此选项使您能够在事件被渲染之前将其添加到编辑器实例中。这样就可以先添加需要自己定义的内容然后渲染到实例中。

二：开发流程

这是参照官网给的代码进行开发的。

首先要定义一个工具名称，这里是以按钮弹框来写的。用的是elementUI组件。

这里是将弹框单独处理了一下，弹框中可以添加其他组件的内容。

到这里这个简单的工具就实现了。当然也可以在弹框中添加其他的功能。

三：工具添加其他的

如果要添加其他的功能，例如在弹框中添加一个选择框或者表单 ，处理的话就是正常的处理，正常使用elementUI的方法和属性。

这是添加了一个选择框的内容。

这样就可以将选项值赋值到编辑器中的内容里了。

四：总结

这里把代码贴一下。我贴的js代码，html代码就不贴了。

setup:(editor)=>{
          let _this = this
          _this.myEditor = editor
            //定义一个名为 dialog 的toolbar，然后将这个toolbar放到editorInit下的toolbar属性中，用‘|’隔开
          editor.ui.registry.addButton('dialog', {
            text: `<i class="el-icon-thumb" style="font-size: 18px">dialog</i>`,
            onAction: () => {
              _this.dialogVisible = true
            },
          })
        },

功能方面的话可以根据elementUI的属性来处理。