Quill富文本编辑器(上)

1. 安装对应包环境   npm install vue-quill-editor --save

2. 对vue-quill-editor组件进行挂载引入，引入的话有两种方式：

     2.1  用根组件全局挂载：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // 引入样式
import 'quill/dist/quill.snow.css' // snow theme
import 'quill/dist/quill.bubble.css' // bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

     2.2 在单组件中局部挂载：

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 {
  components: {
    quillEditor
  }

 3. quill-editor 引入后， 作为组件注册到项目中即可正常使用；

<template>
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />
</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 {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: [
        ['bold', 'italic', 'underline', 'strike'], // 字体
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }], // 样式标题
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'script': 'sub'}, { 'script': 'super' }], // 下标、上标
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
        [{ 'direction': 'rtl' }],

        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean'] // 格式清除
      ]
    }
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted () {
    console.log('this is current quill instance object', this.editor)
  }
}
</script>

 效果图如下：