在Vue中使用富文本編輯器Quill

【版本】

• vue-cli3
• webpack@4.33.0
• quill@2.0.0-dev.3

【步驟】

下載Quill

npm install quill --save

封裝一個富文本編輯器組件

在組件中引入Quill
editor.vue

<template>
  <div>
    <div class="editor"></div>
  </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
  name: 'editor',
  props: {
    value: Object
  },
  data() {
    return {
      quill:null,
      options: {
        theme: 'snow',
        modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video']
            ]
          },
          placeholder: 'Insert text here ...'
      }
    }
  },
  mounted() {
    let dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options);
    this.quill.setContents(this.value)
    this.quill.on('text-change', () => {
      this.$emit('input', this.quill.getContents())
    });
  }
}
</script>

在有須要的頁面使用該組件

App.vue

<template>
  <div>
    <div>背景</div>
    <editor v-model="bg"></editor>
    <div>計劃</div>
    <editor v-model="plan"></editor>
  </div>
</template>

<script>
import editor from '@/components/editor.vue';
export default {
  components: {
    editor
  },
  data() {
    return {
      bg: {},
      plan: {}
    }
  }
}
</script>

【經常使用API】

下面請原諒個人佛系翻譯 :P

quill.getContents

用於獲取編輯器裏的內容，這些內容是帶格式的，返回值是一個Delta對象。

用法

getContents(index: Number = 0, length: Number = remaining): Delta

例子

var delta = this.quill.getContents();

quill.setContents

用於設置編輯器裏的內容（傳入的delta參數常見使用 getContents 返回的值）。傳入的內容應以新行結束。返回值是一個Delta對象。 source 參數能夠傳 "user" , "api" , "silent"。若是 source 是 "user"，當編輯器處於 disabled時該方法會失效。

用法

setContents(delta: Delta, source: String = 'api'): Delta

例子

this.quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' }
]);

quill.enable

設置用戶可編輯能力。

用法

enable(enabled: boolean = true)

例子

this.quill.enable();
this.quill.enable(false);   // Disables user input

quill.disable

同enable(false)。

quill.keyboard.addBinding

爲鍵盤按鍵和按鍵修飾符綁定監聽函數。
其中，修改鍵包括：metaKey, ctrlKey, shiftKey, altKey。另外，shortKey 是平臺特定的修改鍵，在Mac系統下等同於metaKey，在Linux 和 Windows系統下等同於ctrlKey。

例子

// 在Windows下Ctrl+Shift+S 完成編輯
var that = this
this.quill.keyboard.addBinding({
    key: 'S',
    shortKey: true,
    shiftKey: true,
    handler: function (range, context) {
      that.finish()
    }
})

【經常使用功能】

在工具欄增長表格插入、刪除功能

quill v1 版本不支持插入表格，v2的dev版本支持表格編輯。因而我從原來的v1.3.6升級成了v2.0.0-dev.3。

npm install quill@2.0.0-dev.3 -dev--save

而後，改變options

options: {
    theme: 'snow',
    modules: {
        toolbar: {
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link', 'image', 'video'],
                [
                    { 'table': 'TD' },
                    { 'table-insert-row': 'TIR' },
                    { 'table-insert-column': 'TIC' },
                    { 'table-delete-row': 'TDR' },
                    { 'table-delete-column': 'TDC' }
                ]
            ],
            handlers: {
                'table': function (val) {
                    this.quill.getModule('table').insertTable(2, 3)
                },
                'table-insert-row': function () {
                    this.quill.getModule('table').insertRowBelow()
                },
                'table-insert-column': function () {
                    this.quill.getModule('table').insertColumnRight()
                },
                'table-delete-row': function () {
                    this.quill.getModule('table').deleteRow()
                },
                'table-delete-column': function () {
                    this.quill.getModule('table').deleteColumn()
                }
            },
        },
        table: true,
    },
    placeholder: '點擊輸入 ...'
},

這樣功能就完成了，可是此時看下工具欄，表格相關的圖標仍是空白的。因爲我尚未設計圖標，先這麼湊活着寫了：

this.$el.querySelector('.ql-table-insert-row').innerHTML = `—`
this.$el.querySelector('.ql-table-insert-column').innerHTML = `|`
this.$el.querySelector('.ql-table-delete-row').innerHTML = `-—`
this.$el.querySelector('.ql-table-delete-column').innerHTML = `-|`