Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 964
Suzan Cioc Avatar asked Dec 04 '22 15:12

Suzan Cioc


2 Answers

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.

like image 55
codewaggle Avatar answered Dec 22 '22 05:12

codewaggle


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

like image 24
Reinmar Avatar answered Dec 22 '22 06:12

Reinmar