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

标签: VUE  tinymce  vue.js  javascript

项目中使用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’

版权声明:本文为weixin_39172079原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39172079/article/details/103600870