富文本編輯器空格與普通輸入框空格的區別

在作富文本編輯器的時候發現一個關於空格的問題.

問題背景

咱們的場景是這樣的:
用戶在web上編輯內容,而後前端把用戶輸入的內容傳給後端,後端把這個內容經過短信發出去.

在這個過程當中我發現了一個問題:
咱們發現,web上輸入的空格發出去短信後在一部分手機上顯示成了?,因而開始排查問題.

問題發現

通過排查,個人結論是這樣的:
咱們發現富文本里面輸入的空格與在textarea input等控件裏面輸入的空格不同.
以微博的富文本編輯器爲例,在裏面輸入的空格是這樣的:

保存的也是這樣的

這裏能夠思考一下,爲何富文本的空格要使用  代替用戶輸入的空格
那是由於,html裏面若是有多個連續的空格的話,最終展現只能展現成一個空格.因此,要想展現多個連續的空格的話,只能用  來代替.

而在textarea裏面輸入的空格是這樣的

保存的時候這樣的

這裏其實會引起一個問題:
若是在 input或者 textarea等輸入的控件裏面輸入多個連續的空格,而展現的時候若是不作特殊處理的話,那麼多個連續空格最終會展現成一個空格.

其實這個問題是花了點時間才發現是這麼個問題的,由於在前端控制檯看到傳給後端的確實是空格,後來複製到能夠顯示空格的編輯器裏面才發現,傳的不是空格

如圖第一行展現的,是富文本編輯器輸出的空格,第二行展現的是普通的空格.
第一行的空格encodeURI以後值爲%C2%A0,就是 .
而咱們常見的空格encodeURI以後值爲%20.

問題解決

知道了問題是什麼,那就好解決了,在咱們的場景裏面,在向後端保存富文本信息的時候把裏面的 空格替換爲普通空格,這樣後端在發送短信的時候取到的說就是咱們常見的空格.
而前端從後端獲取到富文本信息須要展現的時候,就把後端返回的數據中的富文本中的常規空格轉化爲 就好了.

參考文檔

• 請問這是什麼字符「'%C2%A0'」？