场景及问题描述：最近在做商品发布功能，类似淘宝的详情页，采用的是vue-quill-editor组件。
在测试发布带有多张图的商品的过程中，展示详情页的时候，多张图片上下存在间隙的问题。
具体问题如下：
-
vue-quill-editor富文本组件展示的图片内容如下，看似没有问题
image.png -
展示到网页上显示的时候，发现详情页的多张图片上下存在间隙
image.png
问题定位
- 查看生成的代码，代码如下：
<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之后，习惯性的点击回车使光标换行，然后接着又上传了1张图片B。vue-quill-editor在监听到换行后，这两张图片就会分别用<p></p>包裹。查看源代码发现p标签有1个上下为16px的间距。因此p标签和p标签会存在间隙。
image.png
解决
- 将多张图片放到一个p标签。
发布商品时，对富文本内容预先做如下处理
var dealContents = this.formData.content;
dealContents = dealContents.replace(/(<\/p><p>)/g, ""); // 去掉</p><p>标签
即，富文本的代码处理成如下即可解决问题。
<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
