问题描述
今天小伙伴遇到一个问题,使用vue-ueditor-wrap富文本编辑器,发现设置autoHeightEnabled为true后,对于某些文章,编辑器的高度依然没有按照实际的文章内容高度进行变化:
问题排查
通过调试代码发现是文章html内容最后存在一个“特别的”节点:
<p style="display: none;">
<mp-style-type data-value="3"></mp-style-type>
</p>
它会使编辑器对内容的高度计算出现问题:
通过代码可以发现,编辑器是获取body下的最后一个节点参与高度计算:domUtils.getXY(t).y + t.offsetHeight
。而意外的最后一个节点是隐藏的,导致计算偏差,从而计算得到编辑器默认的240高度。
解决方案
1.对内容进行包裹:在内容最外层包裹一层<div>
(注意,不要使用<p>标签进行包裹)
2.移除最后的隐藏节点,确保最后一个节点不是隐藏节点