6.安装使用vue-quill-editor

前言：

在vue项目中，因为涉及到使用文本编辑器，

恰恰vue-quill-editor就是一个简单实用的富文本编辑器。

参考文档：vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options

实战：

1.安装

npm install vue-quill-editor --save

2.vue引入

在main.js中引入

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)

3.使用

<template>
        <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)" class="quillEditor">
    </quill-editor> 
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default {
        name:'editor',
        data(){
            return {
                content:null,
                editorOption:{
                    
                }
            }
        },
        methods:{
            onEditorBlur(){//失去焦点事件
            },
            onEditorFocus(){//获得焦点事件
            },
            onEditorChange(){//内容改变事件
            }
        }
    }
</script>

<style scoped>

.quillEditor{
    height: 550px;
}

</style>

4.效果：