Search code examples
angularckeditor5

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

I am using CKEditor 5 in an Angular 8 project. I know I can set editor's editor's height through stylesheet using 

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

This approach works.

But I cannot use this as I cannot know the min-height should be 500px before hand. The desired height will be calculated in the TypeScript. Hence I need to know how to set it from there.

I have tried setting the height using querySelector. Like-

selector.style.minHeight = calculatedHeight

It works initially but the problem is when the editor is focused/blurred, the event functions are called which **resets the height to the height of total content inside it.

Now, I can handle these event to readjust the height again like the following - 

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

Now focusing retains the provided height. But when clicked else where which triggers blur event, the height readjusts but some other follow up event resets it again. I don't know which event is fired after blur. Also, this is not a good solution either.

TL;DR: The min-height for the editor I want to set is dynamic and is calculated in the TypeScript. So I cannot use CSS and need set the height from TypeSript.

Solution

  • Answering my own question as it may come in handy for other. Got the answer from the CKEditor team on Github.

    To adjust the height of the editable element it will look like this:

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

    This works with all types of editors.