vue+quill-editor 富文本框 使用

1、npm install quill-editor -- save

2、添加组件

<quill-editor v-model="content"

              ref="myQuillEditor"

              :options="editorOption"

              @blur="onEditorBlur($event)"

              @focus="onEditorFocus($event)"

              @ready="onEditorReady($event)"

              @change="onEditorChange">

</quill-editor>

3、引入相关文件及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 {

components: {

quillEditor

},

    data () {

return {

            content:'',

            editorOption:{}

};

    },

    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

        }

},

}