在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) 内容编辑事件

现在我们就拥有一个富文本编辑器啦！