时间戳

首页 > 解决方案 > CKEditor 5 - 如何从 TypeScript 而不是 CSS 以编程方式设置编辑器的高度

angular - CKEditor 5 - 如何从 TypeScript 而不是 CSS 以编程方式设置编辑器的高度

问题描述

我在 Angular 8 项目中使用 CKEditor 5。我知道我可以使用样式表设置编辑器的编辑器高度

:host ::ng-deep .ck-editor__editable {
    min-height: 500px;
}

这种方法有效。

但我不能使用它，因为我不知道最小高度应该是 500px。所需的高度将在TypeScript中计算。因此我需要知道如何从那里设置它。

我尝试使用querySelector设置高度。喜欢-

selector.style.minHeight = calculatedHeight

它最初可以工作，但问题是当编辑器聚焦/模糊时，调用事件函数将高度重置为其中总内容的高度。

现在，我可以处理这些事件以重新调整高度，如下所示 -

<ckeditor [editor]="Editor" (ready)="onReady($event)" (focus)="readjustHeight()" (blur)="readjustHeight()" data="<p>Hello, world!</p>"></ckeditor>

现在聚焦保留提供的高度。但是，当单击触发模糊事件的其他位置时，高度会重新调整，但其他一些后续事件会再次将其重置。我不知道模糊后会触发哪个事件。此外，这也不是一个好的解决方案。

TL;DR：min-height我要设置的编辑器是动态的，并且是在 TypeScript 中计算的 。所以我不能使用 CSS，需要从 TypeSript 设置高度。

标签： angularckeditor5

解决方案

回答我自己的问题，因为它可能对其他人有用。从 Github 上的 CKEditor 团队得到了答案。

要调整可编辑元素的高度，它将如下所示：

editor.editing.view.change( writer => {
    writer.setStyle( 'height', '200px', editor.editing.view.document.getRoot() );
} );

这适用于所有类型的编辑器。

推荐阅读