基于vue的富文本编辑器Vue-Quill-Editor

因为项目需要，需要添加富文本编辑器，特意查询下，目前网上有很多富文本编辑器，UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce等，这么多让人有点不知所措。看大家对vue-quill-editor口碑还可以，就特意试试。

vue-quill-editor相关地址：
https://github.com/surmon-china/vue-quill-editor
https://github.surmon.me/vue-quill-editor/
vue-quill-editor个性化配置参考此文档
https://quilljs.com/docs/configuration/

1. vue-quill-editor安装

npm install vue-quill-editor --save

2. 导入 vue-quill-editor
   在main.js中将vue-quill-editor 引入项目

import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
/*default global options 此处是默认的配置，
可以参考此https://quilljs.com/docs/configuration/做个性化配置,
例如换成这个Vue.use(VueQuillEditor, {
  theme: 'bubble' 
});*/

3.使用 vue-quill-editor
在相关组件中使用

<template>
  <div class="shop">shop
      <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>

  </div>
</template>

<script>
  import Quill from 'quill'
export default {
  name: 'Shop',
  data () {
    return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        }
    }
  },
    // manually control the data synchronization
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    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>
<style scoped>

</style>

运行后，大致效果是这样：