这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

之前使用的富文本编辑器是uEditor,kindEditor，感觉不太方便。

近期项目vue单页面，就使用vue-quill-edit这个编辑器组件吧！

一、安装  cnpm install vue-quill-editor

二、引入

在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)

三、封装组件

代码如下：

import Bus from "../../assets/utils/eventBus";

export default {

data() {

return {

content:'',

editorOption: {

placeholder: "请编辑内容",

modules: {

toolbar: [

["bold", "italic", "underline", "strike"],

["blockquote", "code-block"],

[{ list: "ordered" }, { list: "bullet" }],

[{ script: "sub" }, { script: "super" }],

[{ indent: "-1" }, { indent: "+1" }],

[{ size: ["small", false, "large", "huge"] }],

[{ font: [] }],

[{ color: [] }, { background: [] }],

[{ align: [] }],

[ "image"]

]

}

}

};

},

props:[

'contentDefault'

],

watch:{

contentDefault:function(){

this.content = this.contentDefault;

}

},

mounted:function(){

this.content = this.contentDefault;

},

methods: {

onEditorBlur() {

//失去焦点事件

// console.log('失去焦点');

},

onEditorFocus() {

//获得焦点事件

// console.log('获得焦点事件');

},

onEditorChange() {

//内容改变事件

// console.log('内容改变事件');

Bus.$emit('getEditorCode',this.content)

}

}

};

.quill_box{

.ql-toolbar.ql-snow{border-color:#dcdfe6;}

.ql-container{height:200px !important;border-color:#dcdfe6;}

.ql-snow .ql-picker-label::before {

position: relative;

top: -10px;

}

.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}

}

四、引入使用

代码如下：

components:{

myEditor:myEditorComponent

},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于vue富文本编辑器组件vue-quill-edit使用教程的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js