此篇笔记记录的是vue-quill-edter的进阶版，如果还没有安装过quill需要查看 https://www.cnblogs.com/meiyanstar/p/12909755.html（vue-quill-editer安装初级版）
实现功能：
- 设置工具栏展示的工具选项
- 工具栏功能提示
- 事件重写，实现文件上传功能
- 事件重写，实现图片上传功能
- 实现图片拖拽上传
- 实现上传到富文本里的图片进行拖拽改变图片大小
一、富文本组件页面全部代码（QuillEditer.vue）
<template> <div class="edit_container"> <quill-editor class="ql-editor" v-model="content" :id="id" :ref="refs" :options="quillOption" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event)" ></quill-editor> </div> </template> <script> import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' import quillConfig from '@/utils/quillconfig.js' import 'quill/dist/quill.min.js' // 上传文件 插入a链接 import { Quill } from 'vue-quill-editor' // 自定义插入a链接 var Link = Quill.import('formats/link') class FileBlot extends Link { // 继承Link Blot static create(value) { let node = undefined if (value && !value.href) { // 适应原本的Link Blot node = super.create(value) } else { // 自定义Link Blot node = super.create(value.href) // node.setAttribute('download', value.innerText); // 左键点击即下载 node.innerText = value.innerText node.download = value.innerText } return node } } FileBlot.blotName = 'link' FileBlot.tagName = 'A' Quill.register(FileBlot) // 上传文件 插入a链接over export default { name: 'VueQuillEditor', components: { quillEditor }, props: ['id', 'refs', 'quillContent'], data () { return { content: null, // 富文本内容 quillOption: quillConfig,//各配置项 } }, created () { this.content = this.quillContent }, mounted() { autotip:{ document.getElementsByClassName('ql-editor')[0].dataset.placeholder='' for(let item of quillConfig.titleConfig){ let tip = document.querySelector('.quill-editor '+ item.Choice) if (!tip) continue tip.setAttribute('title',item.title) } } }, methods: { // 失去焦点事件 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 }) { this.content = html this.$emit('childQuill',html) }, } } </script> <style scoped > .ql-editor { line-height: normal !important; /* 335px; 我是需要展示给手机端所以设置了宽 */ } .ql-snow .ql-tooltip[data-mode='link']::before { content: '请输入链接地址:'; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: '保存'; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode='video']::before { content: '请输入视频地址:'; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { content: '18px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { content: '32px'; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: '文本'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { content: '标题1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: '标题2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { content: '标题3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { content: '标题4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { content: '标题5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { content: '标题6'; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: '标准字体'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { content: '衬线字体'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { content: '等宽字体'; } </style> <style> /* 自定义上传文件的icon */ .ql-upload{ background-image: url("../assets/images/file.svg") !important; background-size: 16px 16px !important; background-position: center center !important; background-repeat:no-repeat !important; } /* 隐藏文件上传的input type=file的样式 */ input.ql-upload { height: 0 !important; width: 0 !important; padding: 0 !important; } </style>
二、富文本配置的全部代码（quillconfig.js）
import { quillUploadimgAndfile } from "@/api/wenjuan"; //上传图片和文件的接口 //quill图片可拖拽上传 import { ImageDrop } from 'quill-image-drop-module'; Quill.register('modules/imageDrop', ImageDrop); //quill图片可拖拽改变大小 import ImageResize from 'quill-image-resize-module' Quill.register('modules/imageResize', ImageResize) // toolbar工具栏的工具选项（默认展示全部） const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}], [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}], [{'indent': '-1'}, {'indent': '+1'}], [{'direction': 'rtl'}], [{'size': ['small', false, 'large', 'huge']}], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}], [{'font': []}], [{'align': []}], ['clean'], ['link', 'image'], ['upload'], ]; const handlers = { // 实现图片上传功能 image: function image() { var self = this; var fileInput = this.container.querySelector('input.ql-image[type=file]'); if (fileInput === null) { fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); // 设置图片参数名 fileInput.setAttribute('name', 'file'); // 可设置上传图片的格式 fileInput.setAttribute('accept','image/png, image/gif, image/jpeg, image/bmp, image/x-icon'); fileInput.classList.add('ql-image'); // 监听选择文件 fileInput.addEventListener('change', function () { let formData = new FormData() formData.append('file',fileInput.files[0]) quillUploadimgAndfile(formData).then(data => {//quillUploadimgAndfile是封装好的上传文件的方法 if (data.data.code === 1) { let length = self.quill.getSelection(true).index; self.quill.insertEmbed(length, 'image', data.data.data.url); self.quill.insertEmbed(length, 'title', data.data.data.fileName); self.quill.setSelection(length + 1) }else { this.$message.error(data.data.info) } }).catch(err => { }) }); this.container.appendChild(fileInput); } fileInput.click(); }, // 实现文件上传功能 upload:function upload() { var self = this; var fileInput = self.container.querySelector('input.ql-upload[type=file]'); if (fileInput === null) { fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); // 设置图片参数名 fileInput.setAttribute('name', 'file'); // 限制上传文件的格式 具体限制格式类型见文章底部 // fileInput.setAttribute('accept','image/png, image/gif, image/jpeg, image/bmp, image/x-icon'); fileInput.classList.add('ql-upload'); // 监听选择文件 console.log('self.quill',self.quill) fileInput.addEventListener('change', function () { let formData = new FormData() formData.append('file',fileInput.files[0]) quillUploadimgAndfile(formData).then(data => {//quillUploadimgAndfile是封装好的上传文件的方法 if (data.data.code === 1) { console.log('asdasda',data.data.data) let length = self.quill.getSelection(true).index; // 插入文件，data为服务器返回的文件链接地址 //**注意这里 - 插入文件地址的方式** self.quill.insertEmbed(length, 'link', {href: data.data.data.url, innerText: data.data.data.fileName}) self.quill.setSelection(length + 1) }else { self.$message.error(data.data.info) } }).catch(err => { }) }); this.container.appendChild(fileInput); } fileInput.click(); } }; // 工具栏功能提示 const titleConfig=[ {Choice:'.ql-bold',title:'加粗'}, {Choice:'.ql-italic',title:'斜体'}, {Choice:'.ql-underline',title:'下划线'}, {Choice:'.ql-header',title:'段落格式'}, {Choice:'.ql-strike',title:'删除线'}, {Choice:'.ql-blockquote',title:'块引用'}, {Choice:'.ql-code',title:'插入代码'}, {Choice:'.ql-code-block',title:'插入代码段'}, {Choice:'.ql-font',title:'字体'}, {Choice:'.ql-size',title:'字体大小'}, {Choice:'.ql-list[value="ordered"]',title:'编号列表'}, {Choice:'.ql-list[value="bullet"]',title:'项目列表'}, {Choice:'.ql-direction',title:'文本方向'}, {Choice:'.ql-header[value="1"]',title:'h1'}, {Choice:'.ql-header[value="2"]',title:'h2'}, {Choice:'.ql-align',title:'对齐方式'}, {Choice:'.ql-color',title:'字体颜色'}, {Choice:'.ql-background',title:'背景颜色'}, {Choice:'.ql-image',title:'图像'}, {Choice:'.ql-upload',title:'文件'}, {Choice:'.ql-link',title:'添加链接'}, {Choice:'.ql-formula',title:'插入公式'}, {Choice:'.ql-clean',title:'清除字体格式'}, {Choice:'.ql-script[value="sub"]',title:'下标'}, {Choice:'.ql-script[value="super"]',title:'上标'}, {Choice:'.ql-indent[value="-1"]',title:'向左缩进'}, {Choice:'.ql-indent[value="+1"]',title:'向右缩进'}, {Choice:'.ql-header .ql-picker-label',title:'标题大小'}, {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'}, {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'}, {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'}, {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'}, {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'}, {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'}, {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'}, {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'}, {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'}, {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'}, {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'}, {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'}, {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'}, {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'}, {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'} ]; export default { placeholder: '', theme: 'snow', // 主题 modules: { toolbar: { container: toolOptions, // 工具栏选项 handlers: handlers, // 事件重写 }, imageResize: {},// 拖拽改变图片大小 imageDrop:true, // 拖拽上传文件 }, titleConfig, };
补充：上传文件限制类型：https://www.cnblogs.com/meiyanstar/p/14676408.html