强烈推荐:vue集成tinymce文本编辑器

先来对比一下各个编辑器

UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲

bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery...

kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了

wangEditor:轻量、简洁、易用,但是升级到 3.x 之后,不便于定制化开发。不过作者很勤奋,广义上和我是一家人,打个call

quill:本身功能不多,不过可以自行扩展,api 也很好懂,如果能看懂英文的话...

summernote:没深入研究,UI挺漂亮,也是一款小而美的编辑器,可是我需要大的

tinymce优势

1. GitHub 用户量多,功能齐全,;

2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器;

3.适合前后端完全分离;

废话不多说,下面直接开始介绍vue如何集成tinymce

1、下载tinymce

npm i tinymce -S

2、然后在node_modules中找到刚才下载的tinymce 并复制到static文件夹下

强烈推荐:vue集成tinymce文本编辑器_第1张图片强烈推荐:vue集成tinymce文本编辑器_第2张图片

其中语言包需要上官网下载

强烈推荐:vue集成tinymce文本编辑器_第3张图片

强烈推荐:vue集成tinymce文本编辑器_第4张图片3、在根目录index.html中引入以下文件

4、在componts文件夹下建个Tinymce组件

强烈推荐:vue集成tinymce文本编辑器_第5张图片

源码如下:


4、调用组件

新建一个vue文件,并配置路由,源码如下:





5、浏览器访问此路由

强烈推荐:vue集成tinymce文本编辑器_第6张图片

完美运行,亲测好使

你可能感兴趣的:(富文本编辑器)