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

wing324 发布于2019-05-27 17:41 / 1921人阅读

摘要：优秀的富文本编辑器有很多，比如，等，但并不是每个都能在移动端有很好的表现。是百度的老牌富文本编辑器，但界面有一股上世纪的感觉，官网最新的一条动态停留在。

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

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

失败的尝试

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

通过各种资料搜集，确定了几个备选的：UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce。

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

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

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

终于找到你

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

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

在项目中使用

在项目中快速集成，需要两个文档：vue-quill-editor 的 github 主页和 Quill 官网。

基础的使用方式在 vue-quill-editor 都有介绍，如果想做一些个性化配置，就需要看 Quill 官网关于各种属性的文档了。

下面说一下我集成的步骤：

1. 安装 vue-quill-editor

npm install vue-quill-editor —save

2. 全局引入

在 main.js 中将 vue-quill-editor 引入项目

import Vue from "vue"
import VueQuillEditor from "vue-quill-editor"

// require styles
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"

Vue.use(VueQuillEditor, /* { default global options } */)

其中 Vue.use(VueQuillEditor, /* { default global options } */) 第二个参数是 Quill 的配置。在这里我只改了默认的 placeholder 提示语，所以最后一行应该是：

Vue.use(VueQuillEditor, {
  placeholder: "请输入内容",
});

详细的配置请参考 Quill 官网

3. 代码中使用

直接使用标签即可

完整代码

上图效果的代码如下：

与公司业务强相关的部分数据和接口做了删减。

有两个点需要注意：

编辑器默认的输入框高度很高，导致输入框与其他内容重叠，可通过最后两段样式来更改输入框的高度。

可以在一个页面上显示多个富文本输入框，本例中就将输入框放在了 v-for 循环里。如何区分每个输入框的值呢？只需在绑定时 v-model="messages[index]" 利用 index 绑定对应的数组位置即可。

以上就是 vue-quill-editor 在实际项目中的使用。

超融合服务器服务器托管基于蓝墨云班课的移动混合式教学模式富文本编辑器 linux文本编辑器富文本web编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7851.html

使用vue开发移动端管理后台

摘要：独立完成一个移动端项目不是很明白为何会有这样的商品管理后台，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，...

simpleapples 2019-08-23 15:42 评论0 收藏0
vue-quill-editor富文本编辑器

摘要：在工作中肯定会遇到使用富文本编辑器的时候接下来我们就来一起学习一下注本项目是在的脚手架中搭建下载配置在中引入引入富文本工具在中使用创建文件在页面添加元素在项目中显示引入他你也可为他添加样式想要获取输入的内容你可以在工作中肯定会遇到使用富文本编辑器的时候接下来我们就来一起学习一下 vue-quill-editor 注: 本项目是在vue的脚手架中搭建 1.下载 npm insta...

paulli3 2019-08-05 12:41 评论0 收藏0
vue-quill-editor富文本编辑器

摘要：在工作中肯定会遇到使用富文本编辑器的时候接下来我们就来一起学习一下注本项目是在的脚手架中搭建下载配置在中引入引入富文本工具在中使用创建文件在页面添加元素在项目中显示引入他你也可为他添加样式想要获取输入的内容你可以在工作中肯定会遇到使用富文本编辑器的时候接下来我们就来一起学习一下 vue-quill-editor 注: 本项目是在vue的脚手架中搭建 1.下载 npm insta...

Muninn 2019-08-21 18:29 评论0 收藏0
OpenDigg前端开源项目周报1219

摘要：由出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。由OpenDigg 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-fix-it 根据error自动生...

bitkylin 2019-08-21 11:19 评论0 收藏0
OpenDigg前端开源项目周报1219

摘要：由出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。由OpenDigg 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-fix-it 根据error自动生...

MartinDai 2019-08-30 13:16 评论0 收藏0