Contribute to this guideReport an issue

Setting Editor Size Documentation

The width and height of the classic editor can be customized to match its context and predicted usage. By default, the editor width equals the width of its container element in the page, while its height is set to 200 pixels.

The editor instance below was adjusted by setting custom config.width and config.height values. Please note that width refers to the entire editor UI, while height only refers to the height of the editing area, excluding the toolbar and the bottom bar.

Width and height properties are only supported for classic editor and are ignored by inline editor.

Related Features

Get Sample Source Code

  • Setting editor size
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Setting editor size</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 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: '70%',
          height: 500,
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>