最近在用vue + element ui寫一個小應用要用到富文字編輯器，以前做專案都一直都用ueditor，但是看了一下它與vue的相容性並不好，又對比了幾個後，選擇了vue-quill-editor。

vue-quill-editor基於Quill、適用於 Vue 的富文字編輯器，支援服務端渲染和單頁應用，正是我想要的☻。這裡只介紹基本的安裝和部分簡單的定製。我翻了很多別人寫的東西對我的專案都無效，最後自己折騰出來在這記錄備忘。

一、安裝

1.安裝模組

npm install vue-quill-editor –save

2.vue元件

<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
 
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor';
 
  export default {
    name: "addJournal",components: {
      quillEditor
    },data() {
      return {
        content: ``,editorOption: {},};
    },methods: {
      onEditorReady(editor) {},// 準備編輯器
      onEditorBlur(){},// 失去焦點事件
      onEditorFocus(){},// 獲得焦點事件
      onEditorChange(){},// 內容改變事件
    },computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },},}
</script>

至此，vue-quill-editor就安裝完成了，效果圖如下：

二、定(zhe)制(teng)

這裡只簡單介紹兩類操作: 樣式修改和自定義工具欄。

1.樣式修改

a) 修改vue-quill-editor編輯框高度

這個其實很簡單了，只要在vue元件的<style>標籤裡增加一個樣式即可

.quill-editor{
  height: 400px;
}

在調整了編輯框的高度後，如果編輯內容的高度超過了編輯框的高度，編輯框會出現滾動條（不手動調整此高度話會一直往下擴充套件）。

b) 修改工具欄對齊方式

這裡需要注意，使用webstorm建立的vue元件中，styte標籤的預設會加上scoped屬性,也就是說，只對當前模組的元素有效，而工具欄是從外部引入的，因此下面的樣式要寫在無scoped屬性的style標籤裡才會有效。

.ql-toolbar.ql-snow{
  text-align: left;
}

修改完後的樣式如下

2.定製工具欄按鈕

以字型大小調節為例，這是預設的調節按鈕，我們想改成多個畫素大小的下拉選框。

step1: 在vue元件中引入quill模組，修改whitelist,並註冊樣式

import * as Quill from 'quill';
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px','12px','14px','16px','20px','24px','36px',false];//false表示預設值
Quill.register(fontSizeStyle,true);

step2: 修改quill-editor的option屬性值

editorOption: {
  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: fontSizeStyle.whitelist}],[{header: [1,2,3,4,5,6,!1]}],[{color: []},{background: []}],[{font: []}],[{align: []}],["clean"],["link","image","video"]],}

這個modules裡面的值是參照vue-quill-editor模組裡的vue-quill-editor.js裡的modules值設定的，只需要將你要修改的工具欄按鈕的值替換成step1裡設定的whitelist值即可。

step3: 增加定製選項的css樣式

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
 content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
 content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
 content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
 content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
 content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
 content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
 content: '36px';
}

此樣式的選擇器可以從quill.snow.css.js中找到，我們要做的只是修改它的data-value值。

修改後的工具欄：

以上這篇vue-quill-editor的使用及個性化定製操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。