tinymce一很nice的一个富文本编辑器

什么是tinymce呢?

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

优势???
1、开源可商用，基于LGPL2.1

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

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

4、界面好看，符合现代审美

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

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

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

看看效果吧

图1 图2

有感兴趣的可以直接看:TinyMCE中文文档地址：http://tinymce.ax-z.cn/

vue项目集成TinyMCE编辑器

1、安装
npm install tinymce -S
npm install @tinymce/tinymce-vue -S

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

图3

2、使用

图4

组件中使用

图5

配置项,我这里展示的只是基本的配置,要完整的可以参考官网或者自行百度

图6

重要提示、重要提示:不然本地是没问题,打包之后就会报错!!!
注意上图红色框内,如果你用的hash或者直接根路径下则可以不用加,因为我这边是history模式修改了输出文件名、

3、组件引入

图7

好了、今天就到此为止吧、希望可以帮助到同学们