How Do I Change the Size of the Editor on the Fly?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Besides defining a default size of the editor window you can also change the size of a CKEditor instance on the fly.

To achieve this, use the resize function to define the dimensions of the editor interface, assigning the window a width and height value in pixels or CSS-accepted units.

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )

While setting the height value, use the isContentHeight parameter to decide whether the value applies to the whole editor interface or just the editing area.

// The height value now applies to the editing area.
editor.resize( '100%', '350', true )
This page was last edited on 24 February 2011, at 20:11.