在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) 内容编辑事件
现在我们就拥有一个富文本编辑器啦!