富文本编辑器和图片压缩问题

粘贴图片

//粘贴图片let quill = this.$refs.myVueEditor.quillthis.$forceUpdate()quill.root.addEventListener('paste', evt => {if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {evt.preventDefault();[].forEach.call(evt.clipboardData.files, file => {if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {return}var range = quill.selection.savedRange.index+1 || 0this.$emit("putImage", file, quill, range);   //拿到file之后对文件进上传服务器})}}, false)

富文本粘贴word文字样式清除

//富文本粘贴word文字样式清除
this.editor.customConfig.pasteTextHandle = function (content) {// content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回if (content == '' && !content) return ''var str = contentstr = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')str = str.replace(/<\/?[^>]*>/g, '')str = str.replace(/[ | ]*\n/g, '\n')str = str.replace(/ /ig, '')console.log('****', content)console.log('****', str)return str}

图片压缩

PngGoImg( a ) {let e = a.name.substring( a.name.length - 4 )if (  e.toLowerCase() === '.png' ) {let b = a.name.substring( 0, a.name.length - 4 )let c = b + '.jpg'let d = new File( [ a ], c, {type: a.type,lastModified: Date.now(),} )return d} else {return a}

通过上面代码将文件转化成 .jpg
因为浏览器对png的图片压缩不友好，所以要转化成.jpg

import * as imageConversion from 'image-conversion';

引入 image-conversion 插件对图片进行压缩处理，可以压缩比例也可以压缩到某个大小
具体操作，文档如下：
https://www.jianshu.com/p/53d4f2b34d54?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=weixin

let files = file.PngGoImg(imgfile)//判断其是否为图片，不是图片则不执行图片压缩return new Promise((resolve, reject) => {//异步回调的方式将图片的file流及图片的压缩比传进组件内部imageConversion.compressAccurately(files, file.ImgCompress(files.size)).then((res) => {res = new File([res], files.name, {type: res.type,lastModified: Date.now(),})//请进行您的操作//res就是转换并且压缩过的图片})})

富文本编辑器和图片压缩问题相关推荐

Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
Java处理富文本编辑器的图片转为base64编码
一.需求(场景) 后台(内网)通过富文本编辑器编辑的图文信息,需要在移动端(外网)展示,需要将内容中的图片的src的路径替换成base64编码的传递到前台. 二.思路 1.获取内容中的<img& ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...

富文本编辑器和图片压缩问题

富文本编辑器和图片压缩问题相关推荐

最新文章

热门文章