Skip to main content

DHTMLX RichText. Initialization example

Live example​

DHTMLX RichText is a client-side rich text editor. This example is the base setup: it loads your HTML content, shows the default toolbar, and sends inserted images to the endpoint you set.

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>

Use case​

Use it when people write formatted text inside your app: a support agent drafting a reply, a user filling in a rich description, an author editing a help page. You pass the starting content as an HTML string, and the editor renders the toolbar, handles formatting, and manages the document. This sample sends inserted images to the URL set in imageUploadUrl; without an upload URL, RichText embeds images as base64 data URLs. To make it yours, set your own value and choose how you want to handle images.

How to do this in your app​

  • Mount the editor: new richtext.Richtext("#richtext", { value, imageUploadUrl }). The first argument is a CSS selector or the container element itself.
  • Set the starting content: pass an HTML string to value. The editor renders it as a formatted document on load, with headings, lists, links, and images in place.
  • Choose how to handle images: provide imageUploadUrl to upload inserted images to a server, or omit it to embed them as base64 data URLs.
  • Read the content back: call getValue(). It returns the current content as HTML by default, or pass a text encoder for plain text.

Good to know​

  • Give the container a size: the editor fills its container. Here #richtext is set to 100% width and height.
  • value seeds the content once: it sets the document at construction. To read edits back later, call getValue() rather than reading value.
  • imageUploadUrl is optional: this demo uses a hosted backend. Without an upload URL, RichText embeds inserted images directly in the editor content as base64 data URLs.

API reference​

Additional resources​