Contribute to this guideReport an issue

Toolbar Location Adjustment Documentation

The toolbar location in classic editor can be adjusted by the developer. In order to define the toolbar position, use the config.toolbarLocation configuration setting. The editor example below was customized by setting this option to bottom.

Refer to the Toolbar Location article to learn more about this feature.

Related Features

Get Sample Source Code

  • Toolbar location adjustment
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Toolbar location adjustment</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', {
          toolbarLocation: 'bottom',
          // Remove some plugins that would conflict with the bottom
          // toolbar position.
          removePlugins: 'elementspath,resize',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>