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

Question

我在 Angular 8 项目中使用 CKEditor 5。我知道我可以使用

通过样式表设置编辑器的编辑器高度

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

这种方法有效。

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

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

selector.style.minHeight = calculatedHeight

它最初有效，但问题是当编辑器是 focused/blurred 时，事件函数被调用，它将高度重置为其中总内容的高度。

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

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

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

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

Answer 1

ckeditor 组件是否是宿主组件的直接子组件？如果是，那么

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

为了将自定义配置传递给 ckeditor 组件，您可以使用 config input. In order to set the height there is config prop

Answer 2

回答我自己的问题，因为它可能对其他人有用。在 Github.

上从 CKEditor 团队得到了答案

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

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

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

Answer 3

对于那些正在寻找反应的人config={{ height: 400 }}

CKEditor 5 - How to set the editor's height programmatically from the TypeScript, NOT from CSS