How to change editor size

[Riasat]

First, go to /js/ckeditor-rollup-500.js

Find

CKEDITOR.config.height="100px";CKEDITOR.config.width="100%";

Change height and/or width.

Then to prevent reflow, go to

admincp > styles manager > edit templates > CSS Templates > css_global.css

Find

.content-entry-box .ckeditor-bare-box.entry-field

In that code block, you will find height defined already. Change the value to your desired number to set the height.

If you want to change width, add

width: 400px;

Make sure you set height/width in here a little more than you did in the js file. Needs to match up with exact padding values.

Important

If you change width, you must make this change also:
After making the above width change, scroll below a bit and find:

.content-entry-box .cke_editor_ckeditor-bare,

.content-entry-box .cke_editor_ckeditor-bare-video,


.content-entry-box .cke_editor_ckeditor-bare-link,


.content-entry-box .cke_editor_ckeditor-bare-edit,


.content-entry-box .cke_editor_ckeditor-bare-video-edit,


.content-entry-box .cke_editor_ckeditor-bare-link-edit,


.content-entry-box .cke_editor_ckeditor-bare-gallery,


.content-entry-box .cke_editor_ckeditor-bare-gallery-edit,


.content-entry-box .cke_editor_ckeditor-bare-poll,


.content-entry-box .cke_editor_ckeditor-bare-poll-edit,


.content-entry-box .cke_editor_ckeditor-bare-mediavideo,


.content-entry-box .cke_editor_ckeditor-bare-mediagallery,


.content-entry-box .cke_editor_ckeditor-bare-mediagallery-edit,


.content-entry-box .cke_editor_ckeditor-advanced,


#editSignatureDialog .cke_editor_ckeditor-signature {


margin-bottom:20px;


padding:0;


width:99.9% !important;


border: {vb:stylevar form_field_border};


background: {vb:stylevar form_field_background};


-moz-border-radius: 3px;


-webkit-border-radius: 3px;


border-radius: 3px;

}

Remove the width: 99.9% !important; line.


Please let me know if this is not working or if you need to enhance it in some other way.

[wdwms]

Thanks.. this works; however you have a type-o:

Set height.
Add


Code:



width: 400px;

should be
height: 400px;

[Riasat]

It wasn't a typo but I have edited it for clarity. Thanks for the feedback.

[Artes_Marciales]

I'm trying to do this but in vBulletin 5.5 it doesn't work. Some way to modify the height of the editor.
The height that comes by default is ridiculous and since a mobile device cannot be modified, it is necessary to add more height, today almost everyone uses a mobile device to navigate the forums.
Any solution to this problem?
Thank you

[Wayne Luke]

This isn't really applicable anymore. The editor should automatically grow as the user types. Plus it can be resized by dragging the handle at the middle bottom of the editor window. If the user manually resizes with the editor handle, this will be remembered and used the next time the editor is loaded.

There isn't really a way to edit it in on Mobile but it should take up a good portion of the screen and the menu bar only shows the most used controls by default to limit the space it needs.

[Artes_Marciales]

There isn't really a way to edit it in on Mobile but it should take up a good portion of the screen and the menu bar only shows the most used controls by default to limit the space it needs.

Thanks for reply Wayne Luk !!

From a PC device it can be made large although I would prefer it to be larger by default or at least be able to change the size. But the problem is in mobile that is not large enough and from a mobile device it cannot be enlarged.
It would be nice if there was a solution for this.
A greeting!!

[Wayne Luke]