quill-editor 富文本编辑器使用及焦点巨坑

quill-editor 富文本编辑器使用及焦点巨坑

一、npm安装依赖 npm install vue-quill-editor --save
二、全局引用，项目入口文件中main.js引入，如下：

import Vue from 'vue'
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)

三、我这里是先弄了一个component组件，里面添加的配置，其中this.$refs.myTextEditor.quill.enable(true)是再次获取焦点，阻止富文本编辑器进入该页面自动获取焦点的话，只需置 false 就好，如下

<template>
  <quill-editor class='editor' ref='myTextEditor' v-model='content' :options='editorOption' @change='onEditorChange($event)'></quill-editor>
</template>

<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike', 'link', 'image'],
  ['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: