Toolbar Position in JavaScript Rich Text Editor

The Rich Text Editor allows you to configure the toolbar’s position using the position field in the toolbarSettings property. The available positions are:

  1. Top (default)
  2. Bottom

Configuring the toolbar position

The Rich Text Editor allows you to position the toolbar at the top or bottom of the content area, depending on your layout requirements. By default, the toolbar is displayed at the top of the editor.

To position the toolbar at the bottom, set the position property in the toolbarSettings configuration to ToolbarPosition.Bottom (or 'Bottom' for JavaScript). This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.

When using TypeScript, import the ToolbarPosition enum from @syncfusion/ej2-richtexteditor to take advantage of compile-time validation.

var editor = new ej.richtexteditor.RichTextEditor({
  height: 340,
  value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
      <p><b>Key features:</b></p>
      <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
      <li><p>Capable of handling markdown editing.</p></li>
      <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
      <li><p>Provides a fully customizable toolbar.</p></li>
      <li><p>Provides HTML view to edit the source directly for developers.</p></li>
      <li><p>Supports third-party library integration.</p></li>
      <li><p>Allows preview of modified content before saving it.</p></li>
      <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
      </ul>`,
  toolbarSettings: {
      position: 'Bottom'
  }
});
editor.appendTo('#editor');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet">
     <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="editor">
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See also