Skip to main content

DHTMLX RichText. Localization example

Live example​

RichText can show its interface in different languages. It ships English, German, and Chinese locales, and you can add your own. This demo switches between the three at runtime with a dropdown above the editor.

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

function changeLocale(sel) {
    widget.setLocale(richtext.locales[sel.value]);
}

<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
	<label for="form-select" class="dhx_sample-label">Select language:</label>
	<select name="form-select" class="dhx_select dhx_sample-input" id="form-select" style="width: 100px;" onchange="changeLocale(this)">
        <option value="en" selected>English</option>
        <option value="de">German</option>
        <option value="cn">Chinese</option>
    </select>
</section>

<div id="richtext" style="height: calc(100% - 60px); width: 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 the same app serves people in different languages, like a support tool where an agent picks their working language, or a product that follows the user's account setting. RichText translates its own UI, so you set the language and the toolbar, menus, and dialogs follow. The demo wires the switch to a dropdown, but you can call the same method from any control or from your app's language logic. To make it yours, call setLocale() with one of richtext.locales, or set the starting language with the locale config.

How to do this in your app​

  • Set the starting language: pass a locale to the locale config, for example locale: richtext.locales.de.
  • Switch at runtime: call widget.setLocale(richtext.locales.cn) to change the language after the editor is running.
  • Read the built-in locales: richtext.locales holds en, de, and cn. Look up the one you need by key, as the demo does with richtext.locales[sel.value].

Good to know​

  • English is the default: without a locale, the editor starts in en. German and Chinese ship alongside it.
  • setLocale re-labels a running editor: it updates the interface in place, so you do not rebuild the editor to change language.
  • Custom languages use the same shape: provide a locale object containing translations for all interface labels, following the structure of a built-in locale.

API reference​

Additional resources​