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

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

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

<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。为了设置高度，有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 }}