CODEWITHSUNDEEP
javascripthtmlckeditor
Suzan Cioc
Suzan Cioc

Reputation: 30097

How to set and lock the CKEditor window size?

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

Upvotes: 4

Views: 12585

Answers (2)

codewaggle
codewaggle

Reputation: 4943

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)

Height:

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

Width:

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

The CkEditor API for config settings is here:
CKEDITOR.config API

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

Upvotes: 13

Reinmar
Reinmar

Reputation: 22023

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.

UPDATE:

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
 *      (<span><span>...</span></span>). 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 :).

Upvotes: 3

Related Questions