vue富文本编辑器上传图片(vue中富文本编辑的插件)

vue-quill-editor富文本编辑器-扩展表格、调整大小上一篇文章已经提到了vue-quill-editor的基本配置以及将转换为URL。本文主要使用插件来完成缩放和表格缩放。插件使用

参考文章：

vue-quill-editor富文本编辑器支持拖拽和放大缩小_*谢婷风吟的博客-CSDN博客npmiquill-image-drop-module-S//拖拽插件npmiquill-image-resize-module-S//放大缩小插件项目quill富文本支持表单__Lunay的博客-CSDNblog_quill表单最近修改了公司模板，富文本即可插入表格，选择几个模型，最后决定使用quill+quill-better-table，并做了一些研究。quill2.0版本的表格功能比较弱，所以需要quill-better-table插件的协助来完成修改需求。quill-better-table官网文档：前言·quill官方中文文档·看云安装npminstallquill^2.0.0-dev.3版本需要大于2.0版本npminstallquill-better-table.文章/详情/121383239

上传后调整大小

1.安装所需插件：

npmiquill-image-drop-module-S//拖放插件

npmiquill-image-resize-module-S//放大和缩小插件

2.组件内的介绍和注册

importQuillfrom'quill'如有必要，您可以安装npmiquill供下面的Quill.register使用。

importresizeImagefrom'quill-image-resize-module'//图像缩放组件参考

从'quill-image-drop-module'导入{ImageDrop}；//拖动组件参考

Quill.register('模块/imageDrop',ImageDrop);//登记

Quill.register('modules/resizeImage',resizeImage)//注册

3.在vue.config.js中添加设置

constwebpack=require('webpack')module.exports={configureWebpack:{plugins:[newwebpack.ProvidePlugin({'window.Quill':'quill/dist/quill.js','Quill':'quill/dist/quill.js'})]}}

4.在editorOption中添加配置，并与模块中的history/toolbar进行调平

imageDrop:true,//拖动imageResize:{//放大缩小displayStyles:{backgroundColor:'black',border:'none',color:'white'},modules:['Resize','DisplaySize','Toolbar']},

附上package.json对应的版本信息

如果出现

鹅毛笔无法导入模块/imageResize。你确定已经注册了吗？

或者没有定义导入。尝试vue.config.js和package.json。

现在效果已经完成了

扩展表格的使用

也使用插件。步骤相似。安装-引入注册-工具栏添加按钮-添加相应的回调即可完成。

不过当前及以上的图像缩放插件不能同时使用，因为如果要使用的formquill版本是2.0以上版本，升级到该版本后，图像缩放插件无法注册。

安装：

npminstallquill^2.0.0-dev.3版本需要大于2.0版本

npm安装quill-better-table

介绍注册

从'quill'导入Quill导入'quill/dist/quill.snow.css'从'quill-better-table'导入QuillBetterTable导入'quill-better-table/dist/quill-better-table.css'Quill.register({'modules/better-table':QuillBetterTable}，true)

使用：

1.在工具栏容器中添加表格按钮

[{'表':'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':['小',false,'大','巨大']}],[{'标题':[1,2,3,4,5,6,false]}],[{'颜色':[]},{'背景':[]}],[{'align':[]}],['链接','图像'],[{'表':'TD'},],],handlers:{'表':函数(){this.quill.getModule('better-table').insertTable(3,3)},},},//imageDrop:true,//imageResize:{//displayStyles:{//backgroundColor:'black',//border:'none',//color:'白色'//},//module:['Resize','DisplaySize','工具栏']//},table:false,'better-table':{operationMenu:{items:{unmergeCells:{text:'另一个取消合并的单元格名称'}},background:{color:'#333'},color:{color:['green','red','yellow','blue','white'],text:'background:'}}},Keyboard:{bindings:QuillBetterTable.keyboardBindings}},placeholder:'在此处插入文本.'}