CKEditor 5 change width

Question

How can i change the width of the CKEditor 5?

I found how to change the height (see below) but unfortunately this trick doesn't work for the width because it only changes the width of the textarea (the toolbox stays at the original width).

<style>
    .ck-editor__editable {
        min-height: 800px;
    }
</style>

Thanks in advance

UPDATE

The solution in case other people would encounter the same problem:

<style>
    /*Textbox*/
    .ck-editor__editable {
        min-height: 800px;
        max-height: 800px;
        min-width: 860px;
    }
    /*Toolbar*/
    .ck-editor__top {
        min-width: 860px;
    }
</style>

Answer 1

You have to set it from initializer, using setStyle, as follow:

ClassicEditor
.create(...)
.then(editor => {
    editor.editing.view.change( writer => {
        writer.setStyle('min-height', '300px', editor.editing.view.document.getRoot());
    } );
window.editor = editor;
)

You can apply any style you like for example height, width, text height, ...etc

Answer 2

You can try with this

<style> .ck.ck-editor {width: 200px;} </style>

You can use to inspect element in Google Chrome or Firefox inspector.

Answer 3

To edit the height of your textarea, simply change the markup.

<textarea rows="12">

</textarea>

Adding more rows will make for a taller textarea.

You can use columns to change the width

<textarea cols="100">

</textarea>

Answer 4

It could be done programmatically and without CSS if the config didn't work. You can refer to my answer here.