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