vue-quill-editor富文本编辑器-扩展表格、图片调整大小

上篇文章已经讲到、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 install quill ^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 ...'}