tinymce富文本编辑器自定义工具栏

最近遇到了一个项目有个富文本编辑器的操作，内容就是在工具栏中加个自定义的按钮，需求挺简单的但是由于文档很少，也不是很常用费了很多功夫。

大体就是点击插入推荐的商品链接出现右侧的抽屉弹窗，然后点击添加的时候，把图片和ID之类的东西加入到富文本编辑器中去。大体这样的效果，话不多说上代码。

1.如何安装我就不说了自己去npm把
2.引入这些文件import tinymce from ‘tinymce/tinymce’
import Editor from ‘@tinymce/tinymce-vue’
import ‘tinymce/themes/silver/theme’
import ‘tinymce/plugins/image’
import ‘tinymce/plugins/link’
import ‘tinymce/plugins/media’
import ‘tinymce/plugins/table’
import ‘tinymce/plugins/lists’
import ‘tinymce/plugins/contextmenu’
import ‘tinymce/plugins/wordcount’
import ‘tinymce/plugins/colorpicker’
import ‘tinymce/plugins/textcolor’
import ‘tinymce/plugins/fullscreen’
这个地方要注意路径
3.创建富文本编辑区
<editor
v-model=“myValue”
:init=“init”
:disabled=“disabled”
@onClick=“onClick”>


注意这个工具栏中配置的mybutton
4.初始化

setup: (editor) => {
editor.ui.registry.addButton(‘mybutton’, {
text: ‘插入推荐的商品链接’,
onAction: () => {
this.drawerFlagGoFather()
}
})
}
自定义工具最主要的是这里，开始的时候只是editor.addButton 这时候会报错，我看了好多的帖子都是这样写的，估计就是一个人写的各种转载而已，然后我这地方就是各种报错，后来找到了报错信息和tinymce的api才看到了 editor.ui.registry.addButton这句。然后终于把按钮装了上去，其实代码挺简单的但是如果没仔细看api或者以前没用过的话这个地方真的挺不好找的。