1、安装

npm install vue-quill-editor --save

2、引入

  • 全局引入：

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

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

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

  • 局部引入：

    import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'
var vm = new Vue({
        components: {
                quillEditor
        }
})

3、使用

    <template>
      <!-- Two-way Data-Binding -->
      <quill-editor
        ref="myQuillEditor"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      />

      <!-- Or manually control the data synchronization -->
      <quill-editor
        :content="content"
        :options="editorOption"
        @change="onEditorChange($event)"
      />
    </template>

    <script>
      // You can also register Quill modules in the component
      import Quill from 'quill'
      import someModule from '../yourModulePath/someQuillModule.js'
      Quill.register('modules/someModule', someModule)

      export default {
        data () {
          return {
            content: '<h2>I am Example</h2>',
            editorOption: {
              // Some Quill options...
            }
          }
        },
        methods: {
          onEditorBlur(quill) {
            console.log('editor blur!', quill)
          },
          onEditorFocus(quill) {
            console.log('editor focus!', quill)
          },
          onEditorReady(quill) {
            console.log('editor ready!', quill)
          },
          onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
          }
        },
        computed: {
          editor() {
            return this.$refs.myQuillEditor.quill
          }
        },
        mounted() {
          console.log('this is current quill instance object', this.editor)
        }
      }
    </script>