上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用（这两个目前quill 版本并不兼容 如果有大神解决了还望指点）
参考文章：
vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_＊且听风吟的博客-CSDN博客npm i quill-image-drop-module -S // 拖拽插件npm i quill-image-resize-module -S // 放大缩小插件
https://blog.csdn.net/HH18700418030/article/details/121017110vue项目 quill 富文本支持表格__Lunay的博客-CSDN博客_quill表格最近修改公司模版，富文本内可以插入表格，选择了几款，最终确定使用quill+quill-better-table,研究了一下。quill 2.0版本的表格功能比较弱，故所需要quill-better-table插件的协助来完成改需要。quill-better-table官网文档：前言 · Quill官方中文文档 · 看云安装npm installquill^2.0.0-dev.3 版本需要大于2.0版本npm install quill-better-table..
https://blog.csdn.net/z9061/article/details/121383239
上传后调整图片大小
1、安装需要使用的插件：
npm i quill-image-drop-module -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件
2、在组件内引入和注册
import Quill from 'quill' 如有需要可以再安装一下 npm i quill 供下面Quill.register 使用
import resizeImage from ‘quill-image-resize-module’ // 图片缩放组件引用
import { ImageDrop } from ‘quill-image-drop-module’; // 图片拖动组件引用
Quill.register(‘modules/imageDrop’, ImageDrop); // 注册
Quill.register(‘modules/resizeImage ‘, resizeImage ) // 注册
3、vue.config.js中添加设置
const webpack = require('webpack')module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})]}}4、在 editorOption 中添加配置 在modules中与 history/toolbar平级
imageDrop: true,//图片拖拽imageResize: {//放大缩小displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},
附上package.json对应的版本信息
如果出现
quill Cannot import modules/imageResize. Are you sure it was registered” />或者 imports 未定义的报错 尝试下vue.config.js和 package.json
至此效果就完成了
扩展表格的使用
也是使用插件 步骤相似 安装-引入注册-toolbar添加按钮-添加对应回调完成
只不过目前和上面 图片缩放的插件不能同时使用 因为想要使用表格 quill的版本要是2.0以后 升级到这个版本后 图片缩放的插件就注册不了了。
安装：
npm installquill^2.0.0-dev.3 版本需要大于2.0版本
npm install quill-better-table
引入&注册
import Quill from 'quill'import 'quill/dist/quill.snow.css'import QuillBetterTable from 'quill-better-table'import 'quill-better-table/dist/quill-better-table.css'Quill.register({'modules/better-table': QuillBetterTable}, true)使用：
1.在toolbar-container 中增加表格的按钮
[{ 'table': 'TD' },],
2.handler 设置表格按钮的回调 这里是引用插件模考方法 初始化一个3X2的表格
handlers: {'table': function () {this.quill.getModule('better-table').insertTable(3, 3)},},完整配置项代码：
options: {theme: 'snow',modules: {toolbar: {container: [['bold', 'italic', 'underline', 'strike'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],[{ 'script': 'super' }],[{ 'indent': '-1' }, { 'indent': '+1' }],[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'header': [1, 2, 3, 4, 5, 6, false] }],[{ 'color': [] }, { 'background': [] }],[{ 'align': [] }],['link', 'image'],[{ 'table': 'TD' },],],handlers: {'table': function () {this.quill.getModule('better-table').insertTable(3, 3)},},},// imageDrop: true,// imageResize: {// displayStyles: {// backgroundColor: 'black',// border: 'none',// color: 'white'// },// modules: ['Resize', 'DisplaySize', 'Toolbar']// },table: false,'better-table': {operationMenu: {items: {unmergeCells: {text: 'Another unmerge cells name'}},background: {color: '#333'},color: {colors: ['green', 'red', 'yellow', 'blue', 'white'],text: 'background:'}}},keyboard: {bindings: QuillBetterTable.keyboardBindings}},placeholder: 'Insert text here ...'}