微信复制富文本到UEditor时宽度百分比%转成xxpx固定宽度导致移动端无法自适应解决方案

修复微信富文本宽度转换

由于从微信复制富文本内容到UEditor时,微信富文本编辑器会将width转换为固定宽度,导致UEditor上传微信的富文本内容到移动端后无法实现自适应宽度,刚开始时以为问题出在UEditor编辑器内,但后来经过测试发现坑是在微信编辑器里:
将微信文本内容复制到另一个微信的富文本时,一样会将百分比宽度转换为固定宽度,所有问题是出在微信编辑器的copy事件上
如图,我将微信富文本内容复制到另一个微信的富文本上,查看html代码,发现一样会将百分比宽度转换为固定宽度,所以问题是出在微信编辑器的copy事件上。也就是说百分比转换为固定宽度是无法避免的,因为我们无法重定义微信富文本的copy事件。
但微信富文本编辑器同时提供了一个data-width属性,它的属性值和width是相等的,只是以百分比的形式保存起来了。
所以问题就是如何把标签的data-width属性值替换width的属性值

这里附上两个正则表达式实现标签的固定宽度转换为百分比宽度,只适用于同时包含data-width属性和width属性的标签。标签的data-width属性值会赋值给width属性:

// 获取富文本内容并传入函数中
function adjustMobileHtml(htmlContent){
  // 当data-width属性在width属性前面时匹配
  const beforeDataWidth = /((<(section|img|div|p|span|ul|li)[\s\S]*?data-width="([1-9]\d*\.?\d*%)"[\s\S]*?width:\s)([1-9]\d*\.?\d*px)([\s\S]*?>))/mig
  // 当data-width属性在width属性后面时匹配
  const afterDataWidth = /((<(section|img|div|p|span|ul|li)[\s\S]*?width:\s)([1-9]\d*\.?\d*px)([
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值