效果图
安装
npm install vue-quill-editor --save
引入
全局
- 全局引入(main)
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)
局部引入
PS
全局引入 或者局部引入必须引入这3个文件css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
一定要引入这三个css,不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入,也可以在具体使用的.vue文件中引入
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
使用
<template>
<div>
<div style="width: 80%; margin: 0 auto">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
</div>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
export default {
name: "HomeView",
components: { quillEditor },
data() {
return {
content: "",
TiLength:0,
// 富文本编辑器配置
editorOption: {},
};
},
methods: {
onSubmit() {
console.log("submit!");
},
// 失去焦点事件
onEditorBlur(quill) {
console.log("editor blur!", quill);
},
// 获得焦点事件
onEditorFocus(quill) {
console.log("editor focus!", quill);
},
// 准备富文本编辑器
onEditorReady(quill) {
console.log("editor ready!", quill);
},
// 内容改变事件
onEditorChange({ quill, html, text }) {
console.log("editor change!", quill, html, text);
this.content = html;
},
},
};
</script>
<style>
</style>