【vue富文本插件】tinymce 安装使用及汉化注意项

前言

前端开发过程中，无论是移动设备还是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
  1
  2

  如果因vue版本过低与最新tinymce插件不兼容，可通过@指定tinymce版本号

  npm install tinymce@5.1.0 -S
  npm install @tinymce/tinymce-vue@3.0.1 -S
  1
  2

  tinymce-vue是tinymce官方提供的一个vue组件，可以直接拿过来使用，但是必须要到官网注册获取api-key，否则只有一段时间的试用期。
  

1.2 提供 CDN 版本免费下载