因?yàn)轫?xiàng)目需要，需要添加富文本編輯器，特意查詢下，目前網(wǎng)上有很多富文本編輯器，UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce等，這么多讓人有點(diǎn)不知所措?？创蠹覍ue-quill-editor口碑還可以，就特意試試。

vue-quill-editor相關(guān)地址：
https://github.com/surmon-china/vue-quill-editor
https://github.surmon.me/vue-quill-editor/
vue-quill-editor個(gè)性化配置參考此文檔
https://quilljs.com/docs/configuration/

1. vue-quill-editor安裝

npm install vue-quill-editor --save

2. 導(dǎo)入 vue-quill-editor
   在main.js中將vue-quill-editor 引入項(xiàng)目

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 此處是默認(rèn)的配置，
可以參考此https://quilljs.com/docs/configuration/做個(gè)性化配置,
例如換成這個(gè)Vue.use(VueQuillEditor, {
  theme: 'bubble' 
});*/

3.使用 vue-quill-editor
在相關(guān)組件中使用

<template>
  <div class="shop">shop
      <!-- bidirectional data binding（雙向數(shù)據(jù)綁定） -->
  <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
    // 如果需要手動控制數(shù)據(jù)同步，父組件需要顯式地處理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>

運(yùn)行后，大致效果是這樣：

image.png