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

由于从微信复制富文本内容到UEditor时,微信富文本编辑器会将width转换为固定宽度,导致UEditor上传微信的富文本内容到移动端后无法实现自适应宽度,刚开始时以为问题出在UEditor编辑器内,但后来经过测试发现坑是在微信编辑器里:
微信复制富文本到UEditor时宽度百分比%转成xxpx固定宽度导致移动端无法自适应解决方案_第1张图片
如图,我将微信富文本内容复制到另一个微信的富文本上,查看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)([\s\S]*?data-width="([1-9]\d*\.?\d*%)([\s\S]*?>)))/mig
  const adjustHtmlContent = htmlContent.replace(beforeDataWidth,'$2$4$6')
  const result = adjustHtmlContent.replace(afterDataWidth,'$2$6$5')
  return result
}

第二种更好的解决方法
直接获取dom节点并更改dom节点属性值即可,相比通过正则表达式的方式而言,这种方法在更易于维护

export function adjustHtmlContent(content){
   let ctx = $(document.createElement('section')).html(content)[0]
   console.log('ctx',ctx.getElementsByTagName('section'));
  //  document.getElementsByTagName('section')
    let SECTION = ctx.querySelectorAll('section')
    for(let i=0;i

你可能感兴趣的:(Javascript,HTML(5),UEditor富文本编辑器)