Contribute to this guideReport an issue

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:

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!

Width and height manipulation is only supported for classic editor and does not work in inline editor.

Related Features

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.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</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>