DHTMLX RichText 2.0: Full-Featured Editor with the Next-Gen Engine, Images, Lists, Export to DOCX and PDF, and More

We live in a digital era where content plays a crucial role in both user engagement and business operations, especially with the increasing volume of AI-generated content. As much of this content is rendered via web interfaces, text editing components become highly demanded in modern technology stacks. With this in mind, our team has put great effort into revitalizing the DHTMLX Rich Text Editor. The result is version 2.0 of our JavaScript component, delivering reworked architecture, improved performance, and multiple new features for effective content management.

Powered by the new next-generation engine, our Rich Text Editor enhances text rendering, reliability of existing features, and is better equipped to support upcoming innovations. The Editor’s functionality is enriched with new tools for adding images, creating lists, exporting/importing in DOCX and PDF formats, printing, and plenty of new text formatting options. The release also introduces notable structural improvements to the UI, including a new menubar section and a more flexible toolbar setup to meet various needs.

These changes should help developers build more user-friendly UIs, while end-users can expect much easier access to what they need.

Download DHTMLX Rich Text Editor v2.0
Estimate the updated functionality for delivering a feature-packed text editor
Get free trial

Let us get acquainted with these and other new features of the Rich Text Editor in more detail.

New Capabilities in Toolbar Configuration

The toolbar is an essential element of our JavaScript Rich Text editor, providing direct access to available editing and formatting tools. Since it defines much of the user experience, improving its configurability and customization is always a good idea. While significant progress has already been made, version 2.0 takes it further by providing full control over toolbar configuration and unlocking a new level of flexibility.

Using the updated toolbar property, you can make fine-grained adjustments to toolbar controls and their order, or, if needed, hide the toolbar. For instance, now it is possible to specify separate toolbar controls rather than blocks with controls as before:

new richtext.Richtext("#root", {
    toolbar: [
        "undo", "style", "bold", "italic", "underline", "text-color",
        "align", "link"
    ]
});

Here is the list of controls currently available for the toolbar.

The updated defaultStyles property allows default style values for particular block types:

defaultStyles: {
 "*": {
   "font-family": "Tahoma",
   "font-size": "14px"
 },
 h1: {
   "font-size": "32px",
   "color": "#333"
 }
}

Check the sample >

Apart from that, you can use the toolbar property to specify custom toolbar controls, like the “Count Characters” button in the example below:
toolbar with a custom button

const toolbar = [
// Other configuration settings
    {
        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;
        }
    }
];

Check the sample >

Menubar for Intuitive Access to Editor Actions

To further elevate the editing experience, the updated RichText also features a new structural element – the menubar. Designed as a complementary control panel, the menubar provides intuitive drop-down menus to access editor operations organized under categories like “File”, “Edit”, “View”, etc.

menubar optionsCheck the sample >

The menubar not only improves the discoverability of available features but also ensures a familiar editing experience for end-users accustomed to traditional text editors. The availability of toolbar operations in the menubar makes it possible to remove less frequently used actions from the toolbar, thereby saving UI space. As a result, you can simultaneously maintain access to rarely used options, while keeping the UI cleaner.

Under the hood, this functionality is enabled by setting the value of the menubar property to true in the RichText configuration.

const widget = new richtext.Richtext("#richtext", {
    menubar: true
// other configuration properties
});

All in all, the menubar is a nice addition to the toolbar, enhancing the editor’s structural flexibility and usability.

The menubar, in combination with a highly configurable toolbar, will help efficiently accommodate new editor features described in the following sections.

New Tools for Managing Content

Text editors can be used to work with content of various types and complexity levels. This implies the need for a powerful set of tools to cover specific content creation scenarios. In version 2.0, we made a big step forward in this direction. The updated DHTMLX RichText component brings on board a range of useful content-related actions that can be added to your JavaScript editor:

1) Layout-enhancing operations

You can visually diversify the content and improve its readability thanks to the added support of:

2) New content formatting options

The arsenal of formatting operations in the editor is extended with:

  • The line height that controls the vertical space between lines of text
  • Horizontal lines that serve as visual dividers between sections of content
  • Indent and outdent operations aimed to increase or decrease the indentation level of the text block
  • Subscript and superscript options to format text below (subscript) or above (superscript) the baseline of regular text, allowing for precise representation of scientific, mathematical, or reference-related content
  • New text alignment option (justify) to align text evenly along both the left and right margins

Toolbar operationsCheck the sample >

These features are enabled via new RichText events. In the user interface, they will be available via the corresponding buttons in the toolbar and drop-down items in the menubar. Together, these novelties provide the necessary instruments for working effectively with various types of text, from marketing to technical and business-oriented content.

Document-Level Actions

The DHTMLX RichText 2.0 introduces powerful document-level features such as exporting, importing, and printing. They are aimed at streamlining the workflow from editing to distribution.
document-level actions

From now on, you can enable end-users to export their content to PDF and DOCX formats, making it much easier to generate shareable documents or offline copies. DOCX files can be successfully imported into the editor without manual copying and pasting. Our export/import service ensures that the original formatting of documents is preserved as much as possible.

The newly added printing feature provides a quick way to deliver digital or physical copies of the document directly from the editor.

All three operations are available via corresponding options in the “File” tab of the menubar or via Event Bus methods.

Other Novelties and Improvements

Alongside big changes, the new Rich Text Editor also comes with a few minor, yet useful updates:

  • Document mode now supports multiple document sizes (A4, A5, A6, A7)
  • Expanded list of available keyboard shortcuts
  • Improved pop-up behavior

There is also a good news for those who plan to use our RichText with top JavaScript frameworks. For this release, we updated the following integration demos:

Our step-by-step guides will also facilitate the integration process.

As a cherry on top, we are happy to share integration samples of the DHTMLX RichText with our Gantt and Scheduler components, vividly demonstrating how to enhance content editing capabilities in DHTMLX’s top tools for project management.

Lastly, v2.0 brings multiple API changes, including some breaking ones that may affect existing implementations. Therefore, we recommend thoroughly reviewing the updated API and following the migration guides to ensure a smooth and predictable transition to v2.0.

That wraps up the overview of DHTMLX Rich Text Editor 2.0. To get the full picture of this release once more, take time to visit the “What’s new” section.

If you want to make sure that the latest version of DHTMLX RichText is the right choice for your project, download a free 30-day trial of v2.0 and get down to testing. Current clients can access the latest version in their Client’s Area.

And remember that the comment section is open for your feedback on this release.

Related Materials:

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components