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.添加富文本内容后的页面展示

    <div class="ql-container ql-snow">
        <div class="ql-editor" v-html="content">
        </div>
    </div>

5.需要注意vue-quill-editor只兼容iE10以上浏览器，以下是不能用的。

6.我曾经在项目中引用的时候会出现富文本编辑器内容无法删除，只能删除第一个字符，后面的点击键盘删除就没有用。找了很多方法没有找出来原因，但是单独创建一个项目引用的时候是没有问题的，最后的解决方式就是在页面创建的时候，自动触发一个键盘事件，然后就可以了。

        document.onkeydown=function(event){
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if(e && e.keyCode==13){ // enter 键
            //要做的事情
          }
        }