时间戳

首页 > 解决方案 > 在浮动 div 中设置 CKEditor 5（Vue 组件）的高度

javascript - 在浮动 div 中设置 CKEditor 5（Vue 组件）的高度

问题描述

我目前在浮动 div（用户可调整大小）中使用 CKEditor 5 - 因此，事先不知道容器的尺寸。

我想将 CK Editor 组件的高度设置为 100%（以填充整个容器） 请注意，将 'height: 100%' 添加到 ck-editor__editable_inline 没有任何作用

我可以通过以下方式更改高度：

document.getElementsByClassName('ck-editor__editable_inline')[0].style.height
= 'calc(' + this.$refs.rteContainer.clientHeight + 'px - 4.5em)';

（4.5em 偏移量用于我的菜单栏）

到目前为止，这工作正常。但是，当组件被聚焦然后模糊时，尺寸会恢复到其原始状态。

我通过将此函数附加到@blur 来解决这个问题：

setTimeout(() => {
                    document.getElementsByClassName('ck-editor__editable_inline')[0].style.height = 'calc(' + this.$refs.rteContainer.clientHeight + 'px - 4.5em)';
                }, 50);

本质上，我在再次覆盖样式之前设置了 50 毫秒的延迟。

这工作正常，但是当样式恢复到其原始状态然后再次被覆盖时会出现明显的闪烁。

有谁知道实现我想要的更好的方法？提前致谢！

标签： javascriptvue.jsckeditor

解决方案

推荐阅读