CODEWITHSUNDEEP
cssckeditortext-editor
lildeveloper
lildeveloper

Reputation: 27

CKEditor 5 change width

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>

Upvotes: 2

Views: 11279

Answers (5)

一位玩家
一位玩家

Reputation: 11

For Jaroslaw M post, I fixed it and it worked!

I use the following code but I appended !important, then it worked.

<style>.ck.ck-editor {width: 100% !important;}</style>

Upvotes: 1

Khalat Jalal
Khalat Jalal

Reputation: 15

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

Upvotes: 2

Abdelsalam Shahlol
Abdelsalam Shahlol

Reputation: 1769

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

Upvotes: 0

Jaroslaw M
Jaroslaw M

Reputation: 41

You can try with this

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

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

Upvotes: 1

Tobias Barsnes
Tobias Barsnes

Reputation: 144

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>

Upvotes: 0

Related Questions