Skip to main content

DHTMLX RichText. Full toolbar example

Live example​

RichText lets you choose which controls the toolbar shows, and in what order. This demo turns on the full built-in set, from undo and text styling to lists, links, images, print, and fullscreen. You list the controls in a plain array.

const fullToolbar = [
	"undo",
	"redo",
	"separator",
	"style",
	"separator",
	"font-family",
	"font-size",
	"separator",
	"bold",
	"italic",
	"underline",
	"strike",
	"separator",
	"text-color",
	"background-color",
    "separator",
    "subscript",
    "superscript",
	"separator",
	"align",
	"line-height",
	"outdent",
	"indent",
	"separator",
	"bulleted-list",
	"numbered-list",
	"quote",
	"separator",
	"link",
	"image",
    "line",
	"separator",
	"clear",
	"separator",
    "print",
	"separator",
	"shortcuts",
	"separator",
	"fullscreen",
	"mode",
];

const widget = new richtext.Richtext("#richtext", { value, imageUploadUrl, toolbar: fullToolbar });
<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 writers expect a full, Word-like bar: a knowledge base page, a long-form email composer, a CMS body field. You list the controls yourself, so you control which tools appear and in what order. The editor handles what each button does; you decide the layout. To make it yours, start from this toolbar array, keep the controls you need, and add "separator" for visual gaps.

How to do this in your app​

  • Pass a toolbar array: new richtext.Richtext("#richtext", { value, imageUploadUrl, toolbar: fullToolbar }). Each string is one control, rendered left to right in array order.
  • Group controls with separators: add "separator" between clusters like undo/redo, styles, and fonts. It draws a divider.
  • Pick the controls you want: this set includes "style", "font-family", "font-size", "bold", "italic", "underline", "strike", "text-color", "background-color", "align", "bulleted-list", "numbered-list", "link", "image", "mode", "fullscreen", and more.
  • Reorder by editing the array: move a string to change its position. The array is the single source of layout.

Good to know​

  • The default toolbar is not the full set: leaving toolbar out or setting it to true uses a curated set of controls. Add other supported controls explicitly when you need them.
  • A toolbar array replaces the defaults: only the controls listed in the array appear. To build on the default set, spread ...richtext.defaultToolbarButtons into your array.
  • "mode" switches the layout: it switches between classic mode, which fills the available editor container, and document mode, which uses a print-style page.

API reference​

Additional resources​