如果我打开一篇已发表的图文,无论是在微信内置浏览器、还是Chrome打开。其中选中正文部分,复制粘贴到新建图文。所有的图片都会自动变成圆角,而且图片的宽度和高度都会自动用 !important 覆写。(原文是没有任何样式的)
我没有用任何浏览器扩展插件、或者第三方图文编辑器、即使在无痕模式,这个情况也能重现。以微信自带浏览器举例,在微信打开任意篇文章,在微信自带浏览器中选中复制正文部分,粘贴到新建图文里。
粘贴后的样式:
原文在图文编辑器内的原始样式:
那些被额外添加的、和排版相关的样式可以理解,但是自动加上图片圆角,到底是为什么。。
顺便给其他同样遇到这个问题的朋友提供一个临时解决方案:
手动清除文章现有的样式。(因为自带编辑器的 "清除格式" 并不能有效清除这些样式。)
const iframe = document.querySelector('iframe#ueditor_0').contentDocument; iframe.querySelectorAll('img').forEach(e => { e.removeAttribute('style'); e.removeAttribute('class'); e.removeAttribute('data-copyright'); e.removeAttribute('data-imgqrcoded'); e.removeAttribute('data-ratio'); e.removeAttribute('crossorigin'); e.removeAttribute('alt'); }); iframe.querySelectorAll('p, span, section, strong, br').forEach(e => { e.removeAttribute('style'); }); iframe.querySelectorAll('mpchecktext').forEach(e => { e.remove() });
按 F12 打开开发者工具,在控制台标签页输入上面的代码,按回车即可。