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

VUE 同时被 2 个专栏收录
2 篇文章 0 订阅
1 篇文章 0 订阅

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

  • 1
    点赞
  • 6
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值