Disable Editor Resizing in CKEditor
Posted by Mike BranskiSep 3
Customization is key, so when I had spent a considerable amount of time trying to disable editor resizing in CKEditor and kept coming up blank, it started to get frustrating. Here we have a pretty solid editor coupled with a pretty solid lack of documentation – reminds me a bit of Magento! To their credit, it’s still extremely new and they are working on documentation for it. That aside, I managed to stumble across a post on their forum that led me in the right direction.
Open up ckeditor/config.js and put the following code in there.
CKEDITOR.editorConfig = function( config ) { config.resize_enabled = false; };
Ultimately, I was aiming to disable only horizontal resizing but that feature’s not available yet (can’t seem to find the forum post where a dev suggested they might implement it). The whole reason I wanted to disable resizing in the first place is because as soon as you would start to drag the resize handle, the editor width would shoot out and you couldn’t make it any smaller. Turns out it’s another somewhat hidden config setting forcing the resize width to a minimum amount.
If you want to keep resizing enabled but adjust the minimum width, use the following code instead.
CKEDITOR.editorConfig = function( config ) { // Sizes are in pixels config.resize_minWidth = 550; // config.resize_maxWidth = 700; // config.resize_minHeight = 200; // config.resize_maxHeight = 500; };
As you’ll notice, there is also a setting for resize_maxWidth, along with similar ones for controlling the height. Any config settings you put in this file will be the new defaults for all editor instances, and once you know some of the things you can change here, you can really streamline the setup of new editor instances throughout your application.
14 comments
Comment by FredCK on September 3, 2009 at 10:54 am
Thanks for the feedback on the documentation. We really aim to have some nice references for developers, and we’re working on it.
Meanwhile, I would point you to take a look at the following page in the API documentation:
http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html
It lists all available configuration options in the editor. I hope it’s useful.
Comment by tille/cpu20 on November 19, 2009 at 9:05 am
thank you very much for this post! This made me actually understand for the first time how to actually use AND configure the ckeditor. I now set the resize_maxWidth and the resize_minWidth to the same with and -voila-> fixed width, flexible height! Greatness!
Greetz! tille..
Comment by Dimas on December 16, 2009 at 10:22 am
Thanks for the post, sometimes it just takes too long trying to search for certain things in the vendors documentation and is just easier on google, your post saved me a considerable amount of time.
For other readers if you want to make the editor fixed width or height, you have to set both “min” and “max” values to the desired pixel value.
Comment by Mike on December 21, 2009 at 4:21 am
Thank you very much for sharing this with us, I found it very helpful!
Comment by david wafula on January 6, 2010 at 12:42 pm
config.resize_maxWidth = ’100%’; allows only vertical resize.
Comment by Alex on January 19, 2010 at 9:04 am
A little update: I found some very usable documentation at http://docs.cksource.com/.
Comment by Paul Klinkenberg on February 21, 2010 at 5:22 pm
@David Wafula: thanks for sharing the “config.resize_maxWidth = ‘100%’;”; I have been looking for it for about half an hour!
Comment by Daglees on February 25, 2010 at 4:16 am
Thanks for the tip!
Comment by kosilko on March 11, 2010 at 8:58 am
config.resize_maxWidth = ‘100%’; <<<- stable bug in all IE versions
Comment by Safari-User on March 26, 2010 at 5:56 am
Seems not to work in Safari, resizing in all directions is still enabled:
config.resize_minWidth = 728;
config.resize_maxWidth = 728;
config.resize_minHeight = 100;
config.resize_maxHeight = 800;
Any Ideas?
Comment by Mike Branski on March 26, 2010 at 11:18 am
@Safari-User: CKEditor resizing is very sluggish in Safari 4 on Windows, however I tested your config settings and they worked.
Comment by Alex on March 27, 2010 at 9:05 am
Thank’s ! This post helped me solve my issue.
Best,
Alex.
Comment by Pham Van Huong on June 30, 2010 at 11:37 pm
Thanks for your guide.
Comment by maGriffe on July 4, 2010 at 4:26 pm
Hi,
I just wanted to share another way to disable this functionality, by editing a CSS file : /ckeditor/skins/kama/editor.css
Change the content of this class :
.cke_skin_kama .cke_resizer, by a simple display:none.
The functionnality should disappear. It worked for me.
Bye