在vue項目中建立一個富文本編輯器Vue-Quill-Editor

1. 下載下傳Vue-Quill-Editor 的依賴

```
npm install [email protected] -S
```
           

2. 下載下傳Vue-Quill-Editor

```
npm install vue-quill-editor -S
```
           

3. 在main.js中引入Vue-Quill-Editor和樣式，注冊元件

```
import  VueQuillEditor from 'vue-quill-editor'
// 引入樣式和主題
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//注冊
Vue.use(VueQuillEditor)

```
           

4. 在vue執行個體中引入插件，聲明元件

```
import { quillEditor, Quill } from "vue-quill-editor";
```

```
components: {
    quillEditor
  },
```
           

5. 在template中添加元件标簽

```

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

data() {
	return {
	content:" ",
  	editorOption: {}
  	}
  }
```
           

說明：

• 綁定的class名是為了設定樣式，可參考我的另外一篇部落格—《基于Vue的文本編輯器 vue-quill-editor 小圖示樣式排布錯亂問題》。
• 可通過options自定義工具欄
• onEditorBlur($event) 失焦事件
• onEditorFocus($event) 聚焦事件
• onEditorChange($event) 内容編輯事件

現在我們就擁有一個富文本編輯器啦！