前端富文本编辑器横向比较，推荐Quill，搭配丰富插件使用美滋滋

Vedu • 2020-08-19 11:12 • 界面设计 • 阅读 2513

最近在用vue element-ui对公司的后台管理系统进行重构，听说这个后台管理系统是零几年的产物，历史悠久，看界面就看得出是前后端不分离时期，PHP后端工程师做的，不符合我们95后程序员的审美，而且里面的富文本编辑器也是很老的，而且很难用，没有视频上传功能，而且也没有上传图片功能，文本插入图片是用base64插入的，难用界面还丑。在重构管理后台，我一直在找一个颜值高的，好用的富文本编辑器，经过这几天的寻找，我终于找到了一个完美的编辑器，它就是——Quill。

UEditor

在找到这个编辑器的时候，我先是试用了百度的UEditor。UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

这个编辑器的优点是功能多，可以上传图片视频到服务器上，但是界面太老，不好看，功能缺点也有，例如上传图片和视频要后端配合改接口，不然搞不了，我去找后端，后端不肯配合我，真让人头大，所以我放弃这个富文本编辑器了。

UEditor

wangEditor

wangEditor是一个国人开发的开源的轻量级 web 富文本编辑器，配置方便，使用简单。界面超级简洁，但是我不太喜欢这个界面，而且也不支持上传图片和视频。所以我放弃了。

wangEditor

TinyMCE

TinyMCE是可定制，灵活的一款富文本编辑器。界面设计很美观，功能也是超级强大的，支持扩展许多高级功能和附加组件，支持拼写检查，图片视频上传等等，应该是目前前端最强的编辑器了，这个编辑器什么都好，但是要钱，公司很抠，不会舍得出一分钱的，哈哈哈。

TinyMCE

CKEditor

CKEditor还算不错，但是功能比较基础，有图片上传功能，没有视频上传功能，但是它有行内编辑功能，还可以拖拽缩小图片，这个功能还是挺强大的，至少其他编辑器好像都没有这个功能。

CKEditor

Quill

Quill,用起来最舒服的编辑器，想要的功能都有，搭配丰富的插件使用起来美滋滋，界面简洁，美观，功能虽然不是很多，但是不慌，我们可以给它搭配各种各样的插件，拓展功能，而且这个编辑器开源免费，插件也很多。

搭配quill-video-image-module插件就可以实现视频上传，图片上传到服务器，而且视频还是用video标签插入的，而不是iframe，还实现了中文提示框，中文功能描述。quill及其功能拓展插件使用方法如下：

npm i vue-quill-editor
npm i quill
npm i quill-video-image-module

“createArticle”>
“ql-editor” v-model=“content” :options=“editorOption”>

如果这篇文章刚好能帮到你，麻烦顺手点个赞吧，谢谢了。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/9652.html

前端富文本编辑器横向比较，推荐Quill，搭配丰富插件使用美滋滋

UEditor

wangEditor

TinyMCE

CKEditor

Quill

相关推荐

发表评论