vue富文本編輯器插件vue-quill-editor使用

簡介

版本:"vue-quill-editor": "^3.0.6"

vue-quill-editor 使用文檔：前言 · Quill官方中文文檔 · 看雲 (kancloud.cn)

安裝

npm  install vue-quill-editor@3.0.6  -s

配置富文本模塊

<template>
  <!-- class="edit_container" -->
  <div style="line-height: normal">
    <quill-editor
      class="ql-editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 調用編輯器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'Editor',
  props: {
    value: String
  },
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        placeholder: '請在這里輸入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜體，下划線，刪除線
            // ['blockquote', 'code-block'], // 引用，代碼塊
            [{ header: 1 }, { header: 2 }], // 標題，鍵值對的形式；1、2表示字體大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下標
            [{ indent: '-1' }, { indent: '+1' }], // 縮進
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', 'large', 'huge'] }], // 字體大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 幾級標題
            [{ color: [] }, { background: [] }], // 字體顏色，字體背景顏色
            [{ font: [] }], // 字體
            [{ align: [] }], // 對齊方式
            ['clean'], // 清除字體樣式
            ['link'] //, 'image', 'video'
          ]
        }
      },
      content: '',
      theme: 'snow'
    }
  },
  methods: {
    onEditorReady(editor) {
      // 准備編輯器
    },
    onEditorBlur() {}, // 失去焦點事件
    onEditorFocus() {}, // 獲得焦點事件
    onEditorChange({ quill, html, text }) {
      this.$emit('contentData', html)
    } // 內容改變事件
  },
  computed: {
    editor() {
      return this.$refs.quillEditor.quill
    }
  },
  mounted() {},
  watch: {
    value(val) {
      this.content = val
    }
  }
}
</script>

使用說明

為模塊注入value(富文本內容(html))、contentData(修改后觸發的方法，這里修改父級變量)

模塊toolbar屬性可以調整工具欄顯示工具詳情請查文檔

class="ql-editor"屬性如果沒有編輯器會過濾制表符和聯系空格

修改css漢化顯示

• 修改后的css：https://wwa.lanzous.com/iUxY3ox304j  下載后改名為quill.snow.css，替換node_modules\quill\dist\quill.snow.css
• 使用模塊設置樣式

<style>
 p {
  margin: 10px;
}
.ql-snow .ql-tooltip::before {
  content: "鏈接地址";
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: "移除";
}
.ql-snow .ql-tooltip a.ql-action::after {
  content: "編輯";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  content: "保存";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "標題1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "標題2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "標題3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "標題4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "標題5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "標題6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "標准字體";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "襯線字體";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等寬字體";
} 
</style>

配置界面使用示例

template部分

 <editor
                :value="announcementFormData.content"
                @contentData="contentChange($event)"
              ></editor>

data

 announcementFormData: {
        content: '',
      },

methods

    contentChange(event) {
      this.announcementFormData.content = event
    },

展示富文本html

相關html、css：https://wwa.lanzous.com/iqcexozpx3a

使用方式打開html傳遞url參數鍵為quillDom值為配置界面生成的html字符串(字符串需要使用encodeURIComponent方法處理)

效果圖