Set CKEditor width/height

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
sangnandar
User
Posts: 980

Set CKEditor width/height

Post 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.


Webmaster
User
Posts: 9425

Post by Webmaster »

  1. 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
});

  1. 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.


sangnandar
User
Posts: 980

Post 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.


Webmaster
User
Posts: 9425

Post by Webmaster »

Check styles in ew.scss, you may want to remove "!important" or specify width there directly.


sangnandar
User
Posts: 980

Post 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.


Post Reply