在Vue项目中使用tinymce富文本编辑器

TinyMC编辑器简介

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

TinyMCE的优势：

开源可商用，基于LGPL2.1

插件丰富，自带插件基本涵盖日常所需功能

接口丰富，可扩展性强，有能力可以无限拓展功能

界面好看，符合现代审美

提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）

对标准支持优秀（自v5开始）

多语言支持，官网可下载几十种语言。

下图为我开启全部功能的截图

TinyMCE中文文档地址：TinyMCE中文文档中文手册

1、安装

vue-cli版本：3.x+

安装tinymce

npm install [email protected] -S 

安装tinymce-vue

npm install --save tinymce "@tinymce/tinymce-vue@^5"

这两个组件安装完之后，在public目录下新建文件夹tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的tinymce文件夹内。

vue-cli版本：2.x

安装tinymce,我安装的是5.10.7

npm install [email protected] -S 

安装tinymce-vue

npm install --save tinymce "@tinymce/tinymce-vue@^3"

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public/tinymce 目录下

注意： 如果是使用 vue-cli 3.x 之前构建的 typescript 项目，就放到 static 目录下，和文中所有 public 目录一样处理

tinymce 默认是英文界面，所以还需要下载一个中文语言包

然后将这个语言包放到相同 public/tinymce 目录下新建的langs文件目录中

这个是vue-cli3项目的放法

2、配置中文语言

到官网下载中文语言包 zh_CN.js

在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示

 vue-cli2.x 同理

​​3.组件

4.组件使用

import TinyEditor from "@/components/TinyMCE"
components: { TinyEditor },