vue解决事件冒泡（在vue2项目中使用vue-quill-editor实现富文本编译器）

1 安装

npm install vue-quill-editor --save

 2 引入

有两种引入方式

（1）全局引入(main)

import  VueQuillEditor from vue-quill-editor//调用编辑器 // 样式 import quill/dist/quill.core.css import quill/dist/quill.snow.css import quill/dist/quill.bubble.css Vue.use(VueQuillEditor)

（2）局部引入

import { quillEditor } from vue-quill-editor export default { components: { quillEditor } }

3 在组件内使用

<template>   <div>     <div style="width: 80%; margin: 0 auto">       <quill-editor         v-model="content"         ref="myQuillEditor"         :options="editorOption"         @blur="onEditorBlur($event)"         @focus="onEditorFocus($event)"         @change="onEditorChange($event)"         @ready="onEditorReady($event)"       >       </quill-editor>     </div>   </div> </template> <script> import { quillEditor } from "vue-quill-editor"; export default {   name: "HomeView",   components: { quillEditor },   data() {     return {       content: "", TiLength:0,       // 富文本编辑器配置       editorOption: {},     };   },   methods: {     onSubmit() {       console.log("submit!");     },     // 失去焦点事件     onEditorBlur(quill) {       console.log("editor blur!", quill);     },     // 获得焦点事件     onEditorFocus(quill) {       console.log("editor focus!", quill);     },     // 准备富文本编辑器     onEditorReady(quill) {       console.log("editor ready!", quill);     },     // 内容改变事件     onEditorChange({ quill, html, text }) {       console.log("editor change!", quill, html, text);       this.content = html;     },   }, }; </script> <style> </style>

 4 自定义编辑器配置项（可以根据自己所需要的显示工具表）

 data中返回

// 富文本编辑器配置 editorOption: { theme: "snow", // or bubble modules: { toolbar: [ ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["blockquote", "code-block"], // 引用 代码块 [{ header: 1 }, { header: 2 }], // 1              、2 级标题 [{ list: "ordered" }, { list: "bullet" }], // 有序  
 
  
 
  
 
  
 
  
 
  
 
  
 
、无序列表 [{ script: "sub" }, { script: "super" }], // 上标/下标 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ direction: "rtl" }], // 文本方向 [ { size: [ "12", "14", "16", "18", "20", "22", "24", "28", "32", "36", ], }, ], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6] }], // 标题 [{ color: [] }, { background: [] }], // 字体颜色













、字体背景颜色 // [{ font: [songti] }], // 字体种类 [{ align: [] }], // 对齐方式 ["clean"], // 清除文本格式 ["image", "video"], // 链接
  
  
  
  
  
  
  、图片  
  
  
  
  
  
  
、视频 ], }, placeholder: "请输入正文", },

（1）对于字体详细的配置 

<template> <div class="vue-quill-editor"> <quill-editor ref="mwQuillEditor" v-model="html" :options="editorOption" /> </div> </template> <script> import { quillEditor, Quill } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; // 设置字体大小 const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上 fontSizeStyle.whitelist = [ "12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px" ]; Quill.register(fontSizeStyle, true); // 设置字体样式 const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上 const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"]; Font.whitelist = fonts; // 将字体加入到白名单 Quill.register(Font, true); export default { name: "VueQuillEditor", components: { quillEditor, }, data() { return { html: this.value, editorOption: { modules: { toolbar: [ [ { size: [ "12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", ], }, ], [ { font: [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", ], }, ], [{ header: [1, 2, 3, 4, 5, 6, false] }] // 标题 ], }, }, isShow: false, }; }, }; </script> <style lang="less"> .vue-quill-editor { .quill-editor { line-height: normal; .ql-container.ql-snow { line-height: normal !important; height: 450px !important; font-size: 14px; } .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: "12px"; } .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: "14px"; } .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: "16px"; } .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "18px"; } .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: "20px"; } .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: "24px"; } .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: "28px"; } .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: "32px"; } .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before, .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { content: "36px"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before { content: "微软雅黑"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before { content: "宋体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before { content: "黑体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before { content: "楷体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before { content: "仿宋"; } .ql-picker.ql-header { .ql-picker-label::before, .ql-picker-item::before { content: "文本"; } .ql-picker-label[data-value="1"]::before, .ql-picker-item[data-value="1"]::before { content: "标题1"; font-size: 14px; } .ql-picker-label[data-value="2"]::before, .ql-picker-item[data-value="2"]::before { content: "标题2"; font-size: 14px; } .ql-picker-label[data-value="3"]::before, .ql-picker-item[data-value="3"]::before { content: "标题3"; font-size: 14px; } .ql-picker-label[data-value="4"]::before, .ql-picker-item[data-value="4"]::before { content: "标题4"; font-size: 14px; } .ql-picker-label[data-value="5"]::before, .ql-picker-item[data-value="5"]::before { content: "标题5"; font-size: 14px; } .ql-picker-label[data-value="6"]::before, .ql-picker-item[data-value="6"]::before { content: "标题6"; font-size: 14px; } } .ql-align-center { text-align: center; } .ql-align-right { text-align: right; } .ql-align-left { text-align: left; } } } </style>

效果展示： 

如果想设置展现的那部分为滚动条形式的

（2）限制输入字符

 js：

methods:{ // 内容改变事件 onEditorChange({ quill, html, text }){ // console.log( quill, html, text ); this.content=html; if(this.$refs.ruleForm){ this.$refs.ruleForm.validateField(content) } let event=this.$refs.mwQuillEditor; event.quill.deleteText(10,1) if(this.content===){ this.TiLength=0 }else{ this.TiLength=event.quill.getLength()-1 } } }

效果展示 ：

（3）自定义控制上传的图片大小

安装插件

npm i quill-image-resize-module

 在vue.config.js 文件中添加配置
  
  
  
  
  
  
  ，记得重启哦~ //其他配置 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ "window.Quill": "quill/dist/quill.js", Quill: "quill/dist/quill.js", }), ], }

引入

// 调整上传图片大小

import ImageResize from quill-image-resize-module

Quill.register(modules/imageResize, ImageResize)

 放在toolbar下面就可以

// 调整图片大小 imageResize: { displayStyles: { backgroundColor: "black", border: "none", color: "white" }, modules: ["Resize", "DisplaySize", "Toolbar"] }