Editor Resizing Customization Documentation
The editor resizing functionality is provided by the Editor Resize plugin which by default is available in the Standard and Full distributions. It adds the resize handle (◢) at the bottom of the editor user interface — this allows users to manually resize the editor window to desired dimensions.
The resize feature is highly customizable. It is possible to:
- Choose available resizing directions from vertical only, horizontal only or both.
- Set the minimum and maximum width that the editor is allowed to expand to.
- Set the minimum and maximum height that the editor is allowed to expand to.
- Disable resizing altogether.
Additionally, the Editor Resize plugin provides the
editor.resize()
method which allows for resizing the editor on the fly. Refer to the
Editor Resizing Customization article to
learn more about this feature.
Custom Resizing Example
The editor instance below was adjusted by setting custom width and height values. Additionally, resizing is allowed in both directions and the minimum and maximum width values after resizing were set. In case of height only the minimum resizing value was configured, so the editor can be expanded vertically without any maximum limit. Play with the resize handle to see what happens when you reach the configured resizing limits!
Related Features
- Editor Resizing – Setting Editor Size
- Editor Resizing – Automatic Editor Height Adjustment to Content
Get Sample Source Code
- Editor resizing customization
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Editor resizing customization</title> <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script> </head> <body> <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea> <script> CKEDITOR.replace('editor1', { width: 600, height: 300, resize_dir: 'both', resize_minWidth: 200, resize_minHeight: 300, resize_maxWidth: 800, removeButtons: 'PasteFromWord' }); </script> </body> </html>