当前位置:   article > 正文

基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战

手机安装vue代码编辑器

优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现。

我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来。

失败的尝试

正确的选择是成功的开始,开发之前肯定要做一些调研。

通过各种资料搜集,确定了几个备选的:UEditorvue-quill-editorwangEditorvue-html5-editortinymce

UEditor 是百度的老牌富文本编辑器,但界面有一股上世纪的感觉,官网最新的一条动态停留在 2016-05-18。官方已经多年不维护了,但民间教程资料很多,所以最后一个尝试吧,其他的搞不定再用 UEditor

wangEditor 的确让人眼前一亮,用官方的话来说就是轻量、简洁、易用、开源免费。觉得这个不错,首先在项目中尝试它。遗憾的发现 wangEditor 在移动端的表现有些让人失望,比如我要设置一个 H1 标题,时灵时不灵的,有时能设置成功,有时不能,大多数时候都不成功,不知道是不是我操作的问题。

接下来尝试 vue-html5-editor ,看介绍还挺好的。按照教程一顿操作后,编辑器并没有在页面上如期而至… 排查了好多次都没有找到问题在哪里,算了吧… 还好还有其他选择。

终于找到你

然后尝试用vue-quill-editor,之所以一开始不用,是因为文档都是英文的… 英文文档毕竟没有中文看着舒服,所以先尝试有中文文档的框架。谁曾想其他几个太不争气了,只好用这个。在移动端的效果出人意料的好,看一下真实效果:

完美支持各种文字效果,还能插入图片,编辑器的外观也挺好看,就它了!

在项目中使用

在项目中快速集成,需要两个文档

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/91229
推荐阅读