Skip to main content

Interactive RichText Examples

DHTMLX RichText is a client-side JavaScript component for creating and editing formatted text, with a configurable toolbar, classic and document layouts, and localization. Explore the interactive demos below to see its features in action, or visit the official documentation for the full API reference.

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

<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>

Getting started​

Set up DHTMLX RichText from scratch:

  • Initialization: create an editor, load HTML content, and set the image upload endpoint
  • Editor with menubar: add File, Edit, View, Insert, Format, and Help menus above the toolbar
  • Document mode: lay the editing area out like a printed page instead of filling the panel
  • Localization: switch the interface language at runtime (English, German, Chinese)

Toolbar & styling​

Choose the controls and restyle the editor:

  • Full toolbar: turn on every built-in control, from text styles to print and fullscreen
  • Custom toolbar button: trim the toolbar and add your own button with a click handler
  • Dark theme with CSS: override CSS variables to restyle the editor, menubar, and toolbar

Text & formats​

Read, write, and measure the content:

Mentions, tags & autocomplete​

Trigger menus that insert content as the user types:

Framework & widget integration​

Run the editor inside a framework or another component:

Additional resources​