一、安装quill-editor富文本编辑器
npm install vue-quill-editor --save
二、引入
1.全局引入
在main.js中引入（示例）：
// 文件：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.局部引入
在模块中引入（示例）：
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
</script>
模块中引入结束。
三、使用
以局部引入为例：
<template>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
components: { quillEditor },
data() {
return {
content: null,
editorOption: {},
};
},
methods: {
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
//内容改变事件
},
},
};
</script>
效果图：
