富文本编辑器空格与普通输入框空格的区别

在作富文本编辑器的时候发现一个关于空格的问题.

问题背景

咱们的场景是这样的:
用户在web上编辑内容,而后前端把用户输入的内容传给后端,后端把这个内容经过短信发出去.

在这个过程当中我发现了一个问题:
咱们发现,web上输入的空格发出去短信后在一部分手机上显示成了?,因而开始排查问题.

问题发现

通过排查,个人结论是这样的:
咱们发现富文本里面输入的空格与在textarea input等控件里面输入的空格不同.
以微博的富文本编辑器为例,在里面输入的空格是这样的:

保存的也是这样的

这里能够思考一下,为何富文本的空格要使用  代替用户输入的空格
那是由于,html里面若是有多个连续的空格的话,最终展现只能展现成一个空格.因此,要想展现多个连续的空格的话,只能用  来代替.

而在textarea里面输入的空格是这样的

保存的时候这样的

这里其实会引起一个问题:
若是在 input或者 textarea等输入的控件里面输入多个连续的空格,而展现的时候若是不作特殊处理的话,那么多个连续空格最终会展现成一个空格.

其实这个问题是花了点时间才发现是这么个问题的,由于在前端控制台看到传给后端的确实是空格,后来复制到能够显示空格的编辑器里面才发现,传的不是空格

如图第一行展现的,是富文本编辑器输出的空格,第二行展现的是普通的空格.
第一行的空格encodeURI以后值为%C2%A0,就是 .
而咱们常见的空格encodeURI以后值为%20.

问题解决

知道了问题是什么,那就好解决了,在咱们的场景里面,在向后端保存富文本信息的时候把里面的 空格替换为普通空格,这样后端在发送短信的时候取到的说就是咱们常见的空格.
而前端从后端获取到富文本信息须要展现的时候,就把后端返回的数据中的富文本中的常规空格转化为 就好了.

参考文档

• 请问这是什么字符“'%C2%A0'”？