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

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3.代码

<template>

    <div class="edit_container">

        <quill-editor

            v-model="content"

            ref="myQuillEditor"

            :options="editorOption"

            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

            @change="onEditorChange($event)">

        </quill-editor>

    </div>

</template>

<script>

import { quillEditor } from "vue-quill-editor"; //调用编辑器

import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css';

export default {

    components: {

        quillEditor

    },

    data() {

        return {

            content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,

            editorOption: {}

        }

    },

    methods: {

        onEditorReady(editor) { // 准备编辑器

        },

        onEditorBlur(){}, // 失去焦点事件

        onEditorFocus(){}, // 获得焦点事件

        onEditorChange(){}, // 内容改变事件

    },

    computed: {

        editor() {

            return this.$refs.myQuillEditor.quill;

        },

    }

}

</script>

4.代码及效果展示