Skip to main content

DHTMLX RichText. Initialization with menubar example

Live example​

RichText can show a top menubar above the toolbar. This demo turns it on with one config flag, adding named menus for file operations, editing, view options, inserting content, formatting, and help. Everything else is the base setup.

const widget = new richtext.Richtext("#richtext", {
    value,
    imageUploadUrl,
    menubar: true
});

<div id="richtext" style="width: 100%; height: 100%;"></div>

<script>
const value = `
        <h2>Meet DHTMLX Rich Text Editor!</h2>
        <p>Create and edit text with ease! DHTMLX RichText is a powerful editor that allows you to:</p>
        <ul>
            <li>Format text: make it <b>bold</b>, <i>italic</i>, <u>underlined</u>, or <s>strikethrough</s>, choose fonts (e.g., Arial), <span style="font-size:16px;">text size</span>, <span style="color:#0066CC;">font color,</span> and <span style="color:#FFFFFF;background:#0066CC;">background color.</span></li>
            <li>Add headings of different levels (from H1 to H6) or use the Paragraph style, align text to the left, center, right, or justify, and create numbered or bulleted lists for structured content.</li>
            <li>Insert hyperlinks for navigation to external resources, add images for visual enhancement, insert horizontal lines for separation, and use subscripts (e.g., x₂) or superscripts (e.g., x²) for scientific or mathematical notation.</li>
            <li>Read and write editor content as HTML, plain text, or Markdown for flexible integration.</li>
            <li>Clear formatting from selected content with a single click.</li>
            <li>Customize the toolbar to suit your needs, adding or removing features as desired.</li>
            <li>Enjoy an adaptive design that works seamlessly on any device, including mobile.</li>
            <li>Use Undo and Redo functions to easily revert or reapply changes as needed.</li>
        </ul>
        <p><b>To learn more, read our <a href="https://docs.dhtmlx.com/richtext/">documentation</a> and check the <a href="https://snippet.dhtmlx.com/q8j4qqq9?tag=richtext">samples</a></b>.</p>
        <hr>
        <blockquote>It is very easy to get things up and running.</blockquote>
        <p><img src="https://docs.dhtmlx.com/richtext-backend/images/3490994099/i.png" style="width:415px;height:276px;"></p>
    `;

    const baseURL = "https://docs.dhtmlx.com/richtext-backend";
    const imageUploadUrl = `${baseURL}/images`;
</script>

Use case​

Use it when people expect a document app layout, like a writing tool or a CMS editor where the menubar groups actions under named menus. The menubar sits above the toolbar and exposes actions such as Import and Export through the File menu. To make it yours, add menubar: true to the editor config.

How to do this in your app​

  • Enable the menubar: add menubar: true to the config. It renders the top menu above the toolbar.
  • Leave it off for a compact editor: omit menubar or set it to false to show only the toolbar.

Good to know​

  • The menubar is separate from the toolbar: it adds named menus on top; it does not replace the toolbar buttons.
  • Some actions are menubar-only: Import and Export are available from the File menu rather than the toolbar.
  • It is off by default: without menubar: true, the editor shows the toolbar alone.

API reference​

Additional resources​