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中引入

1 import  VueQuillEditor from 'vue-quill-editor'
2 // require styles 引入樣式
3 import 'quill/dist/quill.core.css'
4 import 'quill/dist/quill.snow.css'
5 import 'quill/dist/quill.bubble.css'
6 
7 Vue.use(VueQuillEditor)

3.使用

 1 <template>
 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>

4.效果：