CKEditor 5 - Как программно установить высоту редактора из TypeScript, а не из CSS

Question

Я использую CKEditor 5 в проекте Angular 8. Я знаю, что могу установить высоту редактора редактора через таблицу стилей, используя

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

. Этот подход работает.

Но я не могу использовать этот , так как не могу знать, минимальная высота должнабыть 500px перед рукой. Желаемая высота будет вычислена в TypeScript . Следовательно, мне нужно знать, как установить его оттуда.

Я попытался установить высоту с помощью querySelector . Like-

selector.style.minHeight = calculatedHeight

Первоначально это работает, но проблема в том, что когда редактор сфокусирован / размыт, вызываются функции событий, которые ** сбрасывают высоту на высоту всего содержимого внутриit.

Теперь я могу обработать это событие, чтобы заново отрегулировать высоту, как показано ниже -

<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 на Github.

Чтобы настроить высоту редактируемого элемента, он будет выглядеть следующим образом:

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

Это работает со всеми типами редакторов.

Answer 2

Является ли ckeditor компонент прямым потомком хост-компонента? Если да, то

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

Чтобы передать пользовательскую конфигурацию компоненту ckeditor, вы можете использовать config input . Для установки высоты есть config prop