Take the 2-minute tour ×

CKEditor creates a resizable window of some default size. Is it possible to set the window to my desired size and prevent it from being resized?

Styles do not work, including explicit style or rows attribute in the textarea tag.

jQuery also does not work (with it's height function).

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

Use these config settings:

Starting height and width:

  config.height = '111px'; 
  config.width = 111;

Is the CkEditor window resizeable:

  config.resize_enabled = false; //false says not resizable

You can let it be resizable, but control the direction (vertical or horizontal) and the minimum and maximum values.

  config.resize_dir = 'vertical'; //Can use (both, vertical, and horizontal)


  config.resize_maxHeight = 111;
  config.resize_minHeight = 111;


  config.resize_maxWidth = 111;
  config.resize_minWidth = 111;

The CkEditor API for config settings is here:

It tells you the allowed values and formatting for each setting.

share|improve this answer
add comment

You can set editor's height and width at start up (only) - there are config options height and width.

See this: CKEditor & JavaScript - Adjust height and width in CKEditor

This one CKEditor 3.0 Height may be interesting to if you want to set height (and width maybe too) to a percentage.


By coincidence I found today this:

 * Resizes the editor interface.
 * @param {Number|String} width The new width. It can be an pixels integer or a
 *      CSS size value.
 * @param {Number|String} height The new height. It can be an pixels integer or
 *      a CSS size value.
 * @param {Boolean} [isContentHeight] Indicates that the provided height is to
 *      be applied to the editor contents space, not to the entire editor
 *      interface. Defaults to false.
 * @param {Boolean} [resizeInner] Indicates that the first inner interface
 *      element must receive the size, not the outer element. The default theme
 *      defines the interface inside a pair of span elements
 *      (&lt;span&gt;&lt;span&gt;...&lt;/span&gt;&lt;/span&gt;). By default the
 *      first span element receives the sizes. If this parameter is set to
 *      true, the second span is sized instead.
 * @example
 * editor.resize( 900, 300 );
 * @example
 * editor.resize( '100%', 450, true );
CKEDITOR.editor.prototype.resize = function( width, height, isContentHeight, resizeInner )

This means that I wasn't right that editor's size can be set only at start up, however it doesn't add anything to the question as well :).

share|improve this answer
add comment

Your Answer


