Ckeditor5-angular: How to set content default height or min-height

[qwe852147]

I had created Ckeditor textarea but its height is always one line height.
It is possible to set default height?

The result is following

[ma2ciek]

It's answered here: https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor.

Please, make some research before reporting issues in the future :)

[ksuhiyp]

I've came across that question, it's not working by adding that css rule to the css file of the component that hosts the editor, Noting that it works when I add the rule n the browser console

[ma2ciek]

I'm sorry for the latest answer, Didn't want to be rude.

In fact, there're two ways to style the component.

First is via the global stylesheet and then this should work:

.ck-editor__editable {
    min-height: 500px !important;
}

But if you want to have the style in the parent component, then you need to add :host ::ng-deep pseudo selectors before.

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

[ma2ciek]

In fact, we should mention this in docs, as styling the angular component can be misleasing.

[Reinmar]

Very nice change! Thanks.

[phoenixgao]

The table cells of inserted table also has class .ck-editor__editable, using the solution in the above comments may cause your tables looks weird.

[ma2ciek]

Hi @phoenixgao.

This issue is already outdated. See the latest docs: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#styling.