如何在vue中使用vue-quill-edit富文本编辑器组件

这篇文章将为大家详细讲解有关如何在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富文本编辑器组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。