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.效果：