当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 20:08:00 HTML5

富文本编辑器中空格和普通输入框空格的区别输入的内容传递给后台,后台通过短信发送内容。在这个过程中,我发现了一个问题:我们发现在网页上输入的空格在发送短信后在某些手机上显示?,于是开始排查问题。排查后发现问题,我的结论是:我们发现在富文本中输入的空格与在textareainput等控件中输入的空格不一样。以微博的富文本编辑器为例,在它的输入空间是这样的:保存也是一样。这里可以思考为什么富文本空间使用而不是用户输入的空间。那是因为如果html中有多个连续的空格,最后的显示只能显示为一个空格。因此,如果要显示多个连续的空格,只能用代替。而在textarea中输入的空格是这样的。在保存的时候,这里其实会造成一个问题:如果在textarea等输入控件中输入或者输入多个连续的空格,而在显示的时候如果不做特殊处理,那么多个连续的空格最终会显示为一个空格。事实上,花了一段时间才发现是这个问题。问题是,因为在前端控制台看到传给后端的信息确实是空格,复制到能显示空格的编辑器后发现传的不是空格space,如图第一行,是富文本编辑器输出的Space,第二行显示的是普通空格。encodeURI后第一行空格的值为%C2%A0,即.而encodeURI之后我们公共空间的值为%20。解决问题知道问题是什么,那很容易解决。在我们的场景中,在保存富文本信息到后台的时候,把空格换成普通的空格,这样后台发短信的时候拿到的就是我们的普通空格。.当前端从后端获取富文本信息需要展示时,只需将后端返回的数据中富文本中的正则空格转换成.参考文档,“'%C2%A0'”这个字符是什么?