Page 1 of 1
Set CKEditor width/height
Posted: Wed Jan 03, 2018 3:25 am
by sangnandar
Field -> Edit Tag -> Textarea
I did this on ckeditor\config.js
config.width = '800px';
config.height = '600px';
But they didn't work as expected. Looks like the width/height have a default value that can't be override.
I've also tried changing cols/rows values in Edit Tag, not working either.
I'm using custom toolbar (if this does matter):
config.toolbar = 'Custom';
config.toolbar_Custom = [['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']];
As you can see the toolbar is small. I need the wider area as if it were using 'Basic' toolbar.
Also I need to report, it's a strange behavior when Font/Size dropdown is selected. The select values used up 100% of screen width.
This behavior also happen on demo site: (top-url)/phpdemo2018/employeesedit.php?EmployeeID=2
Thanks.
Re: Set CKEditor width/height
Posted: Wed Jan 03, 2018 9:44 am
by Webmaster
- Note that HTML editors has "create.editor" event which you can change the config including width/height, e.g.
$(document).on("create.editor", function(e, args) {
//console.log(args); // View the arguments
// change args.settings which is config object for CKEditor
});
Regarding combobox panel width, you can modify ew.scss, find:
.cke, .mce-tinymce {
width: 100% !important;
}
.modal-body {
.cke, .mce-tinymce {
width: 100% !important;
}
}
change 100% to auto.
Re: Set CKEditor width/height
Posted: Thu Jan 04, 2018 8:01 am
by sangnandar
Client Scripts:
$(document).on("create.editor", function(e, args) {
console.log(args); // View the arguments
// change args.settings which is config object for CKEditor
args.settings.height = '1000px';
args.settings.width = '1000px';
args.settings.toolbar_Custom = [['Bold','Italic','Underline','RemoveFormat','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Cut','Copy','Paste','PasteText','Undo','Redo']];
args.settings.toolbar = 'Custom';
});
args.settings.width = '1000px'; // has no effect. The rest of code works well.
Try adding this line:
args.settings.resize_dir = 'both'; // the same, no effect. The width is still untouchable either by code or resize button (bottom corner right).
console.log(args); // works good, the width value is there.
Re: Set CKEditor width/height
Posted: Thu Jan 04, 2018 10:46 am
by Webmaster
Check styles in ew.scss, you may want to remove "!important" or specify width there directly.
Re: Set CKEditor width/height
Posted: Fri Jan 05, 2018 3:51 am
by sangnandar
Ok, I got it.
I believe there will be ew.scss fix on the next template release.
In the meantime I'll just go with jQuery inline css.
Thanks.