文章目录
-
- 前言
- 一、tinymce 下载安装
-
- 1.1 npm 安装
- 1.2 提供 CDN 版本免费下载
- 二、tinymce 本地化
-
- 三、编写富文本组件
- 四、在其他 .vue 组件中引入上面编写的 myEditor 组件
- 五、相关问题
-
- 5.1 汉化
- 5.2 富文本不显示或者黄色文本提示
- 附:引入第三方拓展啊插件
前言
前端开发过程中,无论是移动设备还是PC设备,经常会用到富文本编辑器。一般情况下,我们不会自己造轮子(太耽误时间,而且有大量成熟的轮子免费且好用),而是使用一些前人封装好的插件。常见的富文本编辑器插件如:wangEditor、UEditor、Kindeditor、Simditor、CKEditor 等等。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址
而我们今天要说的,TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器。插件丰富,可扩展性强,功能配置灵活简单,加载速度快,界面好看,符合现代审美,可支持多种语言:(官网说的这些优势,当然大家可以在使用过过程中进行对比):
- 开源可商用,基于LGPL2.1
- 插件丰富,自带插件基本涵盖日常所需功能
- 接口丰富,可扩展性强,有能力可以无限拓展功能
- 界面好看,符合现代审美
- 提供经典、内联、沉浸无干扰三种模式
- 对标准支持优秀(自v5开始)
- 多语言支持,官网可下载几十种语言。
你可以通过隐藏工具栏的方式,让富文本编辑器无缝融合到页面中。也可以开启全部功能,呈现经典的类 word 模式,界面如下:
你可以更改图表颜色,更加醒目的展示某个功能:
官网
一、tinymce 下载安装
1.1 npm 安装
-
环境
- “node”: v14.18.1
- “vue”: “^2.6.10”
- “tinymce”: “^6.7.0”
- “@tinymce/tinymce-vue”: “^3.2.8”
-
安装相关插件
npm install tinymce -S npm install @tinymce/tinymce-vue -S
如果因vue版本过低与最新tinymce插件不兼容,可通过@指定tinymce版本号
npm install tinymce@5.1.0 -S npm install @tinymce/tinymce-vue@3.0.1 -S
tinymce-vue是tinymce官方提供的一个vue组件,可以直接拿过来使用,但是必须要到官网注册获取api-key,否则只有一段时间的试用期。