添加缩进会对图片地址的&进行转义

[heyanfeng]

bug 描述

没有添加文字缩进的时候，getHtml获取的内容如下，可以发现图片src是正常的，里面的‘&’没有被转义成‘&’

我给某段文字添加了缩进，然后这时候上传图片，通过getHtml可以看到img标签的src地址里面的'&'被转义成了‘&amp’

这两者的区别在于包裹img的p标签上面多了text-indent的样式导致的

你预期的样子是？

希望文本样式操作不会影响到图片地址的改变，对于上传接口回填的url不要将‘&’转义成‘&amp’，会影响到图片签名时效性相关业务

浏览器及版本号

chrome 99.0.4844.83（正式版本） (x86_64)

wangEditor 版本

"@wangeditor/editor": "^0.15.17", "@wangeditor/editor-for-vue": "^0.6.14-3",

官网能否复现该 bug ？

官网demo的上传是base64，和我的场景不一样

最小成本的复现步骤

• 步骤一 输入一些文字，然后点工具栏里面的增加缩进
• 步骤二 上传图片
• 步骤三 通过getHtml查看即可

[heyanfeng]

目前发现会影响图片地址转义的功能有：对齐方式/行高/缩进，也就是包裹img标签的外层p标签如果包含了以上三种样式(text-align/line-height/text-indent)之一，都会影响图片地址，目前发现的影响就是将‘&’变成‘&amp’

[wangfupeng1988]

已复现，会尽快解决

[wangfupeng1988]

经过排查，是以下原因导致的：

const div1 = document.createElement('div')
div1.innerHTML = '<img src="xxx.png?a=1&b=2"/>'
console.log(div1.outerHTML) // <div><img src="xxx.png?a=1&amp;b=2"></div>

wangEditor 代码内部用到了 outerHTML ，于是就把 & 转为了 & 。目前尚未找到解决方案，我继续追踪。

[heyanfeng]

经过排查，是以下原因导致的：

const div1 = document.createElement('div')
div1.innerHTML = '<img src="xxx.png?a=1&b=2"/>'
console.log(div1.outerHTML) // <div><img src="xxx.png?a=1&amp;b=2"></div>

wangEditor 代码内部用到了 outerHTML ，于是就把 & 转为了 & 。目前尚未找到解决方案，我继续追踪。

可以在div1外面再套一层textarea

  const textarea = document.createElement('textarea');
  textarea.innerHTML = div1.outerHTML
  console.log(textarea.childNodes[0].nodeValue) // <div><img src="xxx.png?a=1&b=2"></div>

[wangfupeng1988]

用 textarea 是可以解决这个问题，但之前我没用过，也不知道有没有其他的坑。毕竟富文本中的内容是多样化的。

所以，暂时我不敢直接修改。万一出问题，影响太广泛了。

你自己可以选择这样来规避这个 bug

const html = editor.getHtml()
const textarea = document.createElement('textarea')
textarea.innerHTML = html
textarea.childNodes[0].nodeValue // 最终的 html