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

最新推荐文章于 2022-11-03 15:33:45 发布

泰阳c

最新推荐文章于 2022-11-03 15:33:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript HTML(5) UEditor富文本编辑器

本文链接：https://blog.youkuaiyun.com/qq_39795538/article/details/98361901

由于从微信复制富文本内容到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)([