vue-quill-editor github地址：https://github.com/surmon-china/vue-quill-editor
官方文檔地址：https://www.npmjs.com/package/vue-quill-editor

vue項(xiàng)目中，npm安裝依賴

npm install vue-quill-editor --save

兩種引用方法，全局引用和局部引用

• 全局引用，項(xiàng)目入口文件中（main.js）注冊(cè)

import Vue from 'vue'
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)

• 局部引用，在需調(diào)用的vue頁面中聲明

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
  }
}

完成上述步驟之后即可使用

附上局部引用代碼，關(guān)于事件和參數(shù)可查閱文檔，這里不一一說明。

<template>
    <div>
        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:600px;"></quill-editor>
    </div>
</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 {
    data(){
        return{
            content: '',
            editorOption: {
               placeholder: '編輯文章內(nèi)容'
             },
        }
    },
    components: {
        quillEditor
    },
    methods:{
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
    }
}
</script>

vue-quill-editor