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

  • Z时代
  • 2024-01-10
  • 分类：综合

之前使用的富文本编辑器是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使用教程 的全部内容， 来源链接： utcz.com/z/344507.html

回到顶部