天天看點

小程式富文本rich-text 無法多個空格的問題

今天在寫小程式業務代碼的時候遇到了一個坑,背景富文本編輯好的html格式的資料發給後端接口後,在小程式界面拿到對應資料通過rich-text展示出來時,多個 隻能展示一個。

背景富文本編輯的内容

小程式富文本rich-text 無法多個空格的問題

小程式接口接收的資料是有多個 的

小程式富文本rich-text 無法多個空格的問題

小程式rich-text渲染界面,隻能展示一個 位置。

小程式富文本rich-text 無法多個空格的問題

其實小程式中是有一個辦法來解決這個多個空格顯示的問題的,就是decode="{{true}}" 。但是這個decode="{{true}}"隻能放在<text>标簽中。

例如:<text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>

但這個辦法在rich-text時無法使用。

後來通過多次搜尋,算是找到了一個折中的辦法吧。就是利用輸入法全角、半角的辦法。

當我們正常在背景富文本編輯時的空格通常情況下輸入法是半角狀态。

小程式富文本rich-text 無法多個空格的問題

來,我們切換成全角編輯富文本空格試一下。

小程式富文本rich-text 無法多個空格的問題
小程式富文本rich-text 無法多個空格的問題
小程式富文本rich-text 無法多個空格的問題
小程式富文本rich-text 無法多個空格的問題

這樣就可以多次空格展示了,不過在背景富文本編輯時有點小麻煩,其實這隻能算是換了種思路來解決小程式富文本無法展示多個空格的問題。

到底怎樣才能直接解決在小程式富文本中展示多個&nbsp;的問題呢?還希望能有知道解決辦法的大佬支支招。