基於 Vue 的移動端富文本編輯器 vue-quill-editor 實戰

優秀的富文本編輯器有不少，好比：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. 代碼中使用

直接使用 <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 在實際項目中的使用。