在做富文本编辑器的时候发现一个对于空格的问题.
问题背景
咱们的场景是这样的:
用户在web上编辑内容,而后前端把用户输出的内容传给后端,后端把这个内容通过短信收回去.
在这个过程中我发现了一个问题:
咱们发现,web上输出的空格收回去短信后在一部分手机上显示成了?,于是开始排查问题.
问题发现
通过排查,我的论断是这样的:
咱们发现富文本外面输出的空格与在textarea input等控件外面输出的空格不一样.
以微博的富文本编辑器为例,在外面输出的空格是这样的:
保留的也是这样的
这里能够思考一下,为什么富文本的空格要应用 代替用户输出的空格
那是因为,html外面如果有多个间断的空格的话,最终展现只能展现成一个空格.所以,要想展现多个间断的空格的话,只能用 来代替.
而在textarea外面输出的空格是这样的
保留的时候这样的
这里其实会引发一个问题:
如果在input或者textarea等输出的控件外面输出多个间断的空格,而展现的时候如果不做非凡解决的话,那么多个间断空格最终会展现成一个空格.
其实这个问题是花了点工夫才发现是这么个问题的,因为在前端控制台看到传给后端的的确是空格,起初复制到能够显示空格的编辑器外面才发现,传的不是空格
如图第一行展现的,是富文本编辑器输入的空格,第二行展现的是一般的空格.
第一行的空格encodeURI之后值为%C2%A0,就是 .
而咱们常见的空格encodeURI之后值为%20.
问题解决
晓得了问题是什么,那就好解决了,在咱们的场景外面,在向后端保留富文本信息的时候把外面的 空格替换为一般空格,这样后端在发送短信的时候取到的说就是咱们常见的空格.
而前端从后端获取到富文本信息须要展现的时候,就把后端返回的数据中的富文本中的惯例空格转化为 就行了.
参考文档
- 请问这是什么字符“'%C2%A0'”？