Skip to main content

DHTMLX RichText. Custom control and simplified toolbar example

Live example​

RichText lets you add your own button to the toolbar next to the built-in controls. This demo trims the toolbar to a few essentials and adds a "Count characters" button that runs custom code. Clicking it reads the editor text and shows the character count outside the editor.

const toolbar = [
    "bold",
    "italic",
    "underline",
    "separator",
    "link",
    "separator",
    "fullscreen",
    "mode",
    {
        type: "button",
        id: "custom",
        css: "wx-primary",
        label: "Count characters",
        handler: () => {
            const text = widget.getValue(richtext.text.toText);
            const charCount = text.replace(/\s/g, "").length;
            document.getElementById("count").innerText = charCount;
        }
    }
];

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

<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">

<section class="dhx_sample-controls">
  Character count:&nbsp;<span id="count">0</span>
</section>

<!-- component container -->
<div id="richtext" style="width: 100%; height: calc(100% - 60px);"></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 the built-in toolbar is more than you need, or when you want an action the editor does not ship, like a word counter, a save button, or a "send to review" step. You list only the controls you want, then drop in a custom button object with your own label and click handler. The handler can read the editor content and do anything your app needs. To make it yours, cut the toolbar array down to your controls and add a { type: "button", ... } entry with your handler.

How to do this in your app​

  • Trim the toolbar: list only the controls you want, like "bold", "italic", "underline", "link", "fullscreen", and "mode".
  • Add a custom button: append an object { type: "button", id: "custom", label: "Count characters", handler: () => { ... } }.
  • Style it: css assigns a class to the button. Use a built-in style (wx-primary or wx-secondary), or pass your own class and style it in your CSS.
  • Read the content in the handler: call widget.getValue(richtext.text.toText) to get plain text, then run your logic.

Good to know​

  • Use strings or control objects: add built-in controls by name for the shorthand form; define custom buttons as objects with fields such as type, label, and handler.
  • handler is your click callback: it runs when the button is pressed, so wire your own behavior there.
  • wx-primary and wx-secondary are the built-in button styles: pass either via css for the editor's look, or your own class for a custom style.
  • Reach the editor from the handler: the demo calls widget.getValue(...) inside the handler to pull the current text.

API reference​

Additional resources​