vue中使用tinymce
- 项目中使用tinymce
- tinymce富文本编辑器说明及效果示例
- 安装tinymce
- 代码实现
- 页面引入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’
更多推荐
Vue中使用富文本编辑器tinymce及遇到的问题
发布评论