1、通过npm安装vue-quill-editor
在cmd输入命令:npm install vue-quill-editor --save
2、在main.js中引入vue-quill-editor
import VueQuillEditor from 'vue-quill-editor'//引入vue-quill-editor富文本编辑器
Vue.use(VueQuillEditor)//vue使用vue-quill-editor富文本编辑器
//这三个css可以在main.js中引入,也可以在具体使用的.vue文件中引入,一定要引入,不然样式会乱
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
3、vue页面中使用vue-quill-editor
最下面的样式可以根据自己需求去调,高度要加优先级,不然不会生效。
<template>
<el-row>
<quill-editor :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</el-row>
</template>
<script>
export default {
data: function() {
return {
editorOption: {}
}
},
methods: {
onEditorBlur(editor) { //失去焦点事件
},
onEditorFocus(editor) { //获得焦点事件
},
onEditorChange({
editor,
html,
text
}){ //编辑器文本发生变化
console.log();
}
}
}
</script>
<style>
.ql-toolbar.ql-snow {
text-align: left;
}
.ql-editor {
height: 300px !important;
}
</style>