vue 富文本编辑器 vue-quill-editor

npm install vue-quill-editor --save

 

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)

 

 2         <quill-editor 
 3       v-model="content" 
 4       ref="myQuillEditor" 
 5       :options="editorOption" 
 6       @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 7       @change="onEditorChange($event)" class="quillEditor">
 8     </quill-editor> 
 9 </template>
10 
11 <script>
12     import { quillEditor } from 'vue-quill-editor'
13     export default {
14         name:'editor',
15         data(){
16             return {
17                 content:null,
18                 editorOption:{
19                     
20                 }
21             }
22         },
23         methods:{
24             onEditorBlur(){//失去焦点事件
25             },
26             onEditorFocus(){//获得焦点事件
27             },
28             onEditorChange(){//内容改变事件
29             }
30         }
31     }
32 </script>
33 
34 <style scoped>
35 
36 .quillEditor{
37     height: 550px;
38 }
39 
40 </style>