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

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

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

失败的尝试

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

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

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

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

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

终于找到你

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

image

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

在项目中使用

在项目中快速集成,需要两个文档: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. 代码中使用

直接使用 <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>

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

有两个点需要注意:

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容