vue-quill-editor 富文本編輯器插件介紹

Iblog項目中博文的文本編輯器采用了vue-quill-editor插件，本文將簡單介紹其使用方法。

引入配置

• 安裝模塊

npm install vue-quill-editor --save

• index.js中引入組件

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

注意必須引入樣式，否則會出現編輯器排版的混亂。

• 組件中注冊

// 在<script></script>之間插入
import { quillEditor, Quill } from 'vue-quill-editor'
// 工具欄配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'color': []}, {'background': []}],
  [{'align': []}],
  ['link', 'image'],
  ['clean'],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'font': []}]
]
export default {
  data () {
    return {
      ...
      editorOption: {
        placeholder: '提示語',
        modules: {
          toolbar: {
            container: toolbarOptions,
            ...
          }
        }
      }
      ...
    }
  },
...
  components: {
    'quill-editor': quillEditor
  },
...
}

• 使用組件

<div class="quill-box">
  <template>
    <quill-editor v-model="content"
                  :options="editorOption"
                  ref="content">
    </quill-editor>
  </template>
</div>

經過上述配置即可使用quill富文本編輯器了。

更改圖片按鈕的事件函數

由於quill插件默認插入圖片是base64格式的，若圖片較大會引起內容太大無法保存到數據庫里面，這樣為了上傳圖片或者插入網絡圖片，要先更改圖片按鈕的事件下函數，具體是在editorOption->modules->toolbar中加入handlers對象，並插入名稱為image的函數，函數的內容設定為自身所需內容，如下

data () {
  return {
    content: '',
    editorOption: {
      ...
      modules: {
        toolbar: {
          container: toolbarOptions,
          handlers: {
            'image': function (value) {
              if (value) {
                // 自定義內容
              } else {
                this.quill.format('image', false)
              }
            }
          }
        }
      }
    }
  }

插入圖片網絡圖片

若想插入來自網絡的圖片，即提供圖片網址，可以加入以下語句

const range = this.quill.getSelection()
const value = prompt('提示語')
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER)

但是這種方法嵌入的圖片暫時不支持調整圖片大小。

使用樣式渲染內容

使用該插件所保存的內容需經過原樣式渲染才能還原編輯時的效果，配置方法為，在<div>標簽中加入ql-editor樣式，並且內容需為html格式呈現

<div class="ql-editor" v-html="articleContent"></div>