关于前端:富文本编辑器空格与普通输入框空格的区别

35次阅读

共计 783 个字符,预计需要花费 2 分钟才能阅读完成。

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

问题背景

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

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

问题发现

通过排查, 我的论断是这样的:
咱们发现富文本外面输出的空格与在 textarea input 等控件外面输出的空格不一样.
以微博的富文本编辑器为例, 在外面输出的空格是这样的:

保留的也是这样的

这里能够思考一下, 为什么富文本的空格要应用   代替用户输出的空格
那是因为,html 外面如果有多个间断的空格的话, 最终展现只能展现成一个空格. 所以, 要想展现多个间断的空格的话, 只能用   来代替.

而在 textarea 外面输出的空格是这样的

保留的时候这样的

这里其实会引发一个问题:
如果在 input 或者 textarea 等输出的控件外面输出多个间断的空格, 而展现的时候如果不做非凡解决的话, 那么多个间断空格最终会展现成一个空格.

其实这个问题是花了点工夫才发现是这么个问题的, 因为在前端控制台看到传给后端的的确是空格, 起初复制到能够显示空格的编辑器外面才发现, 传的不是空格

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

问题解决

晓得了问题是什么, 那就好解决了, 在咱们的场景外面, 在向后端保留富文本信息的时候把外面的   空格替换为一般空格, 这样后端在发送短信的时候取到的说就是咱们常见的空格.
而前端从后端获取到富文本信息须要展现的时候, 就把后端返回的数据中的富文本中的惯例空格转化为   就行了.

参考文档

  • 请问这是什么字符“’%C2%A0’”?
正文完
 0