場(chǎng)景及問(wèn)題描述：最近在做商品發(fā)布功能，類(lèi)似淘寶的詳情頁(yè)，采用的是vue-quill-editor組件。
在測(cè)試發(fā)布帶有多張圖的商品的過(guò)程中，展示詳情頁(yè)的時(shí)候，多張圖片上下存在間隙的問(wèn)題。
具體問(wèn)題如下：
-
vue-quill-editor富文本組件展示的圖片內(nèi)容如下，看似沒(méi)有問(wèn)題
image.png -
展示到網(wǎng)頁(yè)上顯示的時(shí)候，發(fā)現(xiàn)詳情頁(yè)的多張圖片上下存在間隙
image.png
問(wèn)題定位
- 查看生成的代碼，代碼如下：
<p><img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985506789437.jpg"></p>
<p><img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985520940370.jpg"></p>
原因：
用戶上傳1張圖片A之后，習(xí)慣性的點(diǎn)擊回車(chē)使光標(biāo)換行，然后接著又上傳了1張圖片B。vue-quill-editor在監(jiān)聽(tīng)到換行后，這兩張圖片就會(huì)分別用<p></p>包裹。查看源代碼發(fā)現(xiàn)p標(biāo)簽有1個(gè)上下為16px的間距。因此p標(biāo)簽和p標(biāo)簽會(huì)存在間隙。
image.png
解決
- 將多張圖片放到一個(gè)p標(biāo)簽。
發(fā)布商品時(shí)，對(duì)富文本內(nèi)容預(yù)先做如下處理
var dealContents = this.formData.content;
dealContents = dealContents.replace(/(<\/p><p>)/g, ""); // 去掉</p><p>標(biāo)簽
即，富文本的代碼處理成如下即可解決問(wèn)題。
<p>
<img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985506789437.jpg">
<img src="http://feiyangimage.oss-cn-shanghai.aliyuncs.com/activity/1613985520940370.jpg">
</p>
最終效果如下
image.png
