富文本编辑器空格与普通输入框空格的区别
source link: https://segmentfault.com/a/1190000039944245
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
富文本编辑器空格与普通输入框空格的区别
在做富文本编辑器的时候发现一个关于空格的问题.
我们的场景是这样的:
用户在web上编辑内容,然后前端把用户输入的内容传给后端,后端把这个内容通过短信发出去.
在这个过程中我发现了一个问题:
我们发现,web上输入的空格发出去短信后在一部分手机上显示成了?,于是开始排查问题.
经过排查,我的结论是这样的:
我们发现富文本里面输入的空格与在textarea input等控件里面输入的空格不一样.
以微博的富文本编辑器为例,在里面输入的空格是这样的:
保存的也是这样的
这里可以思考一下,为什么富文本的空格要使用
代替用户输入的空格
那是因为,html里面如果有多个连续的空格的话,最终展示只能展示成一个空格.所以,要想展示多个连续的空格的话,只能用来代替.
而在textarea里面输入的空格是这样的
保存的时候这样的
这里其实会引发一个问题:
如果在input或者textarea等输入的控件里面输入多个连续的空格,而展示的时候如果不做特殊处理的话,那么多个连续空格最终会展示成一个空格.
其实这个问题是花了点时间才发现是这么个问题的,因为在前端控制台看到传给后端的确实是空格,后来复制到可以显示空格的编辑器里面才发现,传的不是空格
如图第一行展示的,是富文本编辑器输出的空格,第二行展示的是普通的空格.
第一行的空格encodeURI之后值为%C2%A0,就是 .
而我们常见的空格encodeURI之后值为%20.
知道了问题是什么,那就好解决了,在我们的场景里面,在向后端保存富文本信息的时候把里面的 空格替换为普通空格,这样后端在发送短信的时候取到的说就是我们常见的空格.
而前端从后端获取到富文本信息需要展示的时候,就把后端返回的数据中的富文本中的常规空格转化为 就行了.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK