Skip to main content

DHTMLX RichText. Document and classic modes example

Live example​

RichText has two layout modes. Document mode sizes the editing area like a page; classic mode, the default, fills the whole panel. This demo shows document mode with the top menubar on.

const widget = new richtext.Richtext("#richtext", {
    value,
    imageUploadUrl,
    layoutMode: "document", // "classic" (default) | "document"
    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 you want the editing area to look like a page rather than fill the panel, for example when writing a letter or a report. Document mode sizes the area like a standard page, while classic mode fills the whole panel. To make it yours, set layoutMode to "document" or "classic", and turn the top bar on with menubar: true.

How to do this in your app​

  • Pick the layout: set layoutMode: "document" for a page-style area, or "classic" for the full-panel view.
  • Show the menubar: add menubar: true to render the top menu above the toolbar.
  • Combine with the rest of the config: layoutMode and menubar sit next to value and imageUploadUrl in the same options object.

Good to know​

  • Classic is the default: leave layoutMode out and the editor uses "classic", the full-panel area.
  • Document mode uses standard page sizes: the editing area adapts from A4 through A7 dimensions as the available width decreases, keeping the page-style layout on smaller screens.
  • The toolbar "mode" control switches the same setting: add "mode" to the toolbar and users can flip between classic and document themselves at runtime.

API reference​

Additional resources​