Vue中使用富文本编辑器tinymce及遇到的问题

项目中使用tinymce

tinymce富文本编辑器说明及效果示例

TinyMCE 5是一款功能强大且灵活的富文本编辑器，可以嵌入Web应用程序中。
API文档及管网地址:https://www.tiny.cloud/docs/api/tinymce/root_tinymce/
效果如下:

安装tinymce

vue安装tinymce:
1.在命令行或命令提示符上，安装Vue CLI工具包。

npm install tinymce -S

2.安装tinymce-vue包，并保存到你package.json用–save。

npm install --save @tinymce/tinymce-vue

3.中文语言包下载:https://www.tiny.cloud/get-tiny/language-packages/
将下载的文件移动到tinymce组件目录下

代码实现

页面引入tinymce及需要使用的组件

初始化配置

此处配置较多：plugins和toolbar不是必须的，按需引入即可

界面使用

tinymceHtml属性为动态绑定的数据

注意事项

1.由于项目中多个模块都需要使用富文本编辑器，所以我将tinymce封装到一个组件中，然后所有模块都来引入。
结果：同时只有一个页面能使用tinymce编辑器，其它页面无法显示。
解决方式：每个模块都单独使用一个tinymce对象
2.动态绑定数据默认不加载，需要第二次才会加载
解决方式：注释掉该插件就能显示 //import ‘tinymce/plugins/pagebreak’