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

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

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