欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > vue-ueditor-wrap设置autoHeightEnabled:true无效问题

vue-ueditor-wrap设置autoHeightEnabled:true无效问题

2024/10/23 21:35:14 来源:https://blog.csdn.net/q1003675852/article/details/141685500  浏览:    关键词:vue-ueditor-wrap设置autoHeightEnabled:true无效问题

问题描述

今天小伙伴遇到一个问题,使用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.移除最后的隐藏节点,确保最后一个节点不是隐藏节点

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com