Vue-Quill-Editor

• 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
• Git：surmon-china/vue-quill-editor

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>