RichText overview

DHTMLX RichText is a flexible and lightweight WYSIWYG editor built with JavaScript. Designed to provide a seamless editing experience in modern web applications, RichText offers a clean UI, rich formatting capabilities, and full control over content rendering. Whether you're building a CMS, an internal admin tool, or an embedded document editor, RichText can be easily integrated and customized to match your needs.

DHTMLX RichText component includes the following features:

• Two layout modes

• Content serialization to both plain text and HTML

• Configurable toolbar with built-in and custom buttons

• Static menubar that can be shown or hidden

• Image uploading, rich formatting, custom styling, and full screen mode

• Full API access for event handling, content manipulation, and reactive state management

RichText is framework-agnostic and can be easily integrated with React, Angular, Vue, and Svelte frameworks, making it suitable for a wide range of front-end ecosystems.

This documentation provides detailed guidance on installation, configuration, usage, and customization. You'll find examples for common scenarios, full API references, and best practices for embedding RichText into your application.

RichText structure

Menubar

The RichText menubar provides access to editing actions such as creating a new document, printing, importing/exporting content, and more. It is hidden by default.

Use the menubar property to toggle its visibility. While the menubar can be enabled or disabled, its contents are not configurable at this time.

Toolbar

The RichText toolbar provides quick access to text formatting and structural editing features. By default, the toolbar is enabled and displays a predefined set of commonly used controls such as bold, italic, font settings, list formatting, and more.

The toolbar property allows you to fully customize the toolbar’s content and layout. You can enable or disable toolbar, rearrange default controls, or define a fully custom toolbar using an array of predefined button identifiers and custom button objects.

Editor

The RichText editor is the central area where users create and format content. You can control the editor’s appearance and behavior through configuration options such as value, layoutMode, and defaultStyles. RichText also supports custom styling, image embedding, and responsive layout adjustments to match the needs of your application.

Two working modes

DHTMLX RichText can work with content in "classic" and "document" modes. You can choose the most suitable mode to feel comfortable while editing text. Use the layoutMode property to switch modes programatically.

• "classic"

• "document"

Supported formats

The RichText editor supports parsing and serialization of content in the HTML and plain text formats.

HTML format

Text format

Keyboard shortcuts

The RichText editor supports a set of common keyboard shortcuts for faster formatting and editing. The shortcuts follow platform conventions and are available on both Windows/Linux (Ctrl) and macOS (⌘).

Text formatting

Action	Windows/Linux	macOS
Bold*	Ctrl+B	⌘B
Italic	Ctrl+I	⌘I
Underline	Ctrl+U	⌘U
Strikethrough	Ctrl+Shift+X	⌘⇧X

Editing

Action	Windows/Linux	macOS
Undo	Ctrl+Z	⌘Z
Redo	Ctrl+Y / Ctrl+Shift+Z	⌘Y / ⌘⇧Z
Cut	Ctrl+X	⌘X
Copy	Ctrl+C	⌘C
Paste	Ctrl+V	⌘V

Special actions

Action	Windows/Linux	macOS
Insert link	Ctrl+K	⌘K
Print	Ctrl+P	⌘P

info

More shortcuts may be introduced in future updates.

To get actual reference related to RichText keyboard shortcuts, press Help and select the Keyboard shortcuts option: