Automatic Editor Height Adjustment to Content Documentation

The optional Auto Grow plugin makes it possible to configure CKEditor 4 to automatically expand and shrink vertically depending on the amount and size of content entered in its editing area.

A few configuration options are available to fine-tune this feature, including setting a minimum and maximum height that the editor can reach when automatically adjusting its size to content. Refer to the Automatic Editor Height Adjustment to Content article to learn more about this feature.

The editor instance below was customized by setting the following Auto Grow plugin configuration options:


config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 200;
config.autoGrow_maxHeight = 600;
config.autoGrow_bottomSpace = 50;

Notice how the editor expands when you start adding more content and see how it reaches the maximum auto grow height defined in its configuration (600 pixels). At the same time, when you start deleting content, the editor UI will shrink to finally reach the minimum defined height (200 pixels). An additional bottom space of 50 pixels will also separate the content from the editor bottom bar.

Related Features

Get Sample Source Code

Automatic editor height adjustment to content

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Automatic editor height adjustment to content</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">&lt;p&gt;This editor instance was configured to &lt;strong&gt;automatically adjust its height to content&lt;/strong&gt; that is added to it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Add some content here &lt;/strong&gt;to see &lt;strong&gt;how the editor expands&lt;/strong&gt; in order to fit it in.&lt;/p&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      extraPlugins: 'autogrow',
      autoGrow_minHeight: 200,
      autoGrow_maxHeight: 600,
      autoGrow_bottomSpace: 50,
      removePlugins: 'resize',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>