CKEditor 和UEditor

富文本调研

因项目需求涉及富文本编辑器，所以调研了几款被大家使用较多的富文本编辑器分别wangEditor、CKEditor、tinymce、UEditor。wangEditor界面简洁，插件功能基本满足需求，但是鉴于已经停止维护，因此放弃了它，tinymce支持图片在线处理、插件多、功能强，不过这个要用到其官网的插件,插件是收费的.因此我注重研究了CKEditor和UEditor。
一．CKEditor
官网：https://ckeditor.com/
Github:https://github.com/ckeditor/ckeditor-dev star 4688 Fork 2085

集成：

1.先引入包
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

2.在main,js中引入依赖
import Vue from ‘vue’;
import CKEditor from ‘@ckeditor/ckeditor5-vue’;
Vue.use( CKEditor );

3，在想要使用富文本编辑的页面使用

运行成功后如下

优点：颜值高，界面简单，轻巧，配置方式简单，图片上传时后端配置少
缺点：图片上传时，默认没有图片预览，图片上传无法看到上传进度，网上相关中文文档较少，英文文档阅读难度大，不利于英语不好的伙伴维护

二、UEditor
官网：https://ueditor.baidu.com/website/
GitHub：https://github.com/fex-team/ueditor star 4702 Fork 1802
集成：
1.下载包：
　　　　从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：
　　　　　　http://ueditor.baidu.com/website/
　　　　　下载解压后会得到如果下文件目录：

将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹
2. 修改配置
　　　　在ueditor.config.js中修改如下代码：

3.引入

可以在main.js中全局引入，也可在使用ueditor的vue中单独引入
4.使用

优点：功能齐全，配置方式简单，图片上传前端配置简单，上传图片可预览，可多图上传，可以查看上传进度，文档多，图片上传后台配置简单，
缺点：页面没有CKEditor简洁，不够轻巧