vue富文本编辑器组件vue-quill-edit使用教程

之前使用的富文本编辑器是uEditor,kindEditor，感觉不太方便。近期项目vue单页面，就使用vue-qu

之前使用的富文本编辑器是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)

三、封装组件

<template>
 <div class="quill_box">
 <quill-editor 
 v-model="content" 
 ref="myQuillEditor" 
 :options="editorOption" 
 @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 @change="onEditorChange($event)">
 </quill-editor>
 </div>
 
</template> 
<script>
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)
 }
 }
};
</script> 

<style lang="less">
 .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;}
 }
</style>

四、引入使用

<my-editor :contentDefault="contentDefault"></my-editor>
components:{
 myEditor:myEditorComponent
 },

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

vue富文本编辑器组件vue quill edit vue富文本编辑器 vue编辑器 vue quill edit