优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现。
我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来。
失败的尝试
正确的选择是成功的开始,开发之前肯定要做一些调研。
通过各种资料搜集,确定了几个备选的:UEditor
,vue-quill-editor
,wangEditor
,vue-html5-editor
,tinymce
。
UEditor
是百度的老牌富文本编辑器,但界面有一股上世纪的感觉,官网最新的一条动态停留在 -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 stylesimport '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. 代码中使用
直接使用<quill-editor>
标签即可
<template><!-- bidirectional data binding(双向数据绑定) --><quill-editor v-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"></quill-editor></template>复制代码
完整代码
上图效果的代码如下:
<template><div class="wrapper"><div class="title" v-html="title"></div><div class="input-wrapper" v-for="(option,index) in options"><div class="sub-title">{{'(' + option.item + ').'}}</div><quill-editor class="editor"v-model="messages[index]"ref="myQuillEditor"@blur="onEditorBlur"@focus="onEditorFocus"@ready="onEditorReady"></quill-editor></div></div></template><script>export default {components: {},props: {item: {type: Object,required: true},index: {type: Number,required: true},},data() {return {messages: [],}},methods: {onEditorBlur() {console.log('blur',this.messages)},onEditorFocus(){console.log('focus',this.messages)},onEditorReady(){console.log('ready',this.messages)}}</script><style lang="scss">.wrapper {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;.title {font-size: $font-size-large;color: $text-main;padding-bottom: px2rem(6);line-height: 150%;}.input-wrapper {display: flex;flex-direction: row;width: 100%;margin: px2rem(5) 0;box-sizing: border-box;.editor{width: 100%;height: px2rem(200);}.sub-title {font-size: $font-size-normal;color: $text-normal;}.field {flex: 1;border: 1px solid $border-third;}}}div.ql-container.ql-snow{height: px2rem(100);}div.ql-editor.ql-blank{height: px2rem(50);}</style>复制代码
与公司业务强相关的部分数据和接口做了删减。
有两个点需要注意:
编辑器默认的输入框高度很高,导致输入框与其他内容重叠,可通过最后两段样式来更改输入框的高度。
可以在一个页面上显示多个富文本输入框,本例中就将输入框放在了v-for
循环里。如何区分每个输入框的值呢?只需在绑定时v-model="messages[index]"
利用index
绑定对应的数组位置即可。
以上就是vue-quill-editor
在实际项目中的使用。