September 3, 2009 

Disable Editor Resizing in CKEditor

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.

Related posts:

  1. Utilizing PHP’s print_r() function

Tags:

  • http://cksource.com/ FredCK

    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.

  • http://www.cpu20.com tille/cpu20

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

  • http://farinspace.com Dimas

    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.

  • http://pagesofinterest.net/blog/ Mike

    Thank you very much for sharing this with us, I found it very helpful!

  • david wafula

    config.resize_maxWidth = ’100%’; allows only vertical resize.

  • Alex

    A little update: I found some very usable documentation at http://docs.cksource.com/.

  • http://www.coldfusiondeveloper.nl/ Paul Klinkenberg

    @David Wafula: thanks for sharing the “config.resize_maxWidth = ‘100%’;”; I have been looking for it for about half an hour!

  • http://www.daglees.com Daglees

    Thanks for the tip!

  • kosilko

    config.resize_maxWidth = ‘100%’; <<<- stable bug in all IE versions :(

  • Safari-User

    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?

  • http://mikebranski.com/ Mike Branski

    @Safari-User: CKEditor resizing is very sluggish in Safari 4 on Windows, however I tested your config settings and they worked.

  • http://none Alex

    Thank’s ! This post helped me solve my issue. :)
    Best,
    Alex.

  • http://Notyet Pham Van Huong

    Thanks for your guide.

  • http://www.romain-menard.fr maGriffe

    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 :)

  • Milan

    Thanks for sharing…

    By the way your site looks great… good to see a young programmer doing creative work…:-)

  • Harry McLaughlin

    This was driving me nuts until I found your post!

    Exactly what I needed. Thanks!

  • http://www.klovera.com Dustin

    For the trick using 100% to disable width resizing you can just use %:

    resize_maxWidth: ‘%’

  • jamestbill

    nice post

  • Teuctzintli

    THANKS!

  • http://www.sprachschule-sprachkurse.de/ Englischkurs

    I think the CKEditor is rather complicated to use…

  • http://twitter.com/miagotatos Tiago Matos

    Thanks for the info. I suppose many people (like myself) are looking for a way to just resize the editor vertically or horizontaly.

    At http://cksource.com/forums/viewtopic.php?t=16626 you can find:

    In CKEditor 3.6 I have added this to my config.js file and it works great:

    config.resize_dir = ‘vertical’;

    Which works perfectly without any hacks.

    Tiago

    • http://mikebranski.com/ Mike Branski

      Thanks for the tip, Tiago! That option didn’t exist back when I wrote this (I believe CKEditor was still in beta when I was looking for this option). What a great addition.

  • Test

    Thanks, that was exactly what I needed!

  • Abc

    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa