编辑器那些无中生有的「空格」

Posted by Eric on November 16, 2020

最近做公众号写CSS代码,把代码从VS Code(或135编辑器)复制到微信公众号编辑界面保存后,文字里就插入了许多莫名其妙的「空格」,主要分布在段落结束、空行,以及原本预留了空格的地方

IMG_1948

图片上黄标的就是莫名其妙的空格,已经删去部分。

每次手删空格真的很浪费时间。。。而且板式也会出各种莫名其妙的问题

在此之前已经删了五六次了,每次删都浪费快半个小时在这些空格上。避免重复操作提高效率,研究了一下这些空格时怎么来的。

「空格之母」代码美化器

代码美化器(Code Formatter)旨在于将冗杂大段的代码变得条理,提高代码的可视化程度

image-20201116220454567image-20201116220519706

而问题,也就出在「美化上」。

“ ” ->  自动转换大法

微信公众号编辑器其实就是百度开发的富文本编辑器(uEditor),是一个iframe框架下的网页并对其进行编辑,ueditor为了识别用户输入的空格,会将空格在编译的时候自动转换成&nbsp;(空格转义符,此处分号应为英文)。代码美化器为了清晰的展示文档的目录结构,通常会在不同层级使用不同的缩进(一般为4个空格符,美化器后台设置可自定义)。在我的公众号代码里,有多个<span> <p>标签的嵌套,所以系统会识别其中的空格为用户输入,尤其是以代码粘贴的时候,空格无中生有的概率会大大增加。

解决