{"id":14199,"date":"2025-07-31T11:11:19","date_gmt":"2025-07-31T08:11:19","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=14199"},"modified":"2026-01-23T13:11:51","modified_gmt":"2026-01-23T10:11:51","slug":"dhtmlx-rich-text-editor-2-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-rich-text-editor-2-0\/","title":{"rendered":"DHTMLX RichText 2.0: Full-Featured Editor with the Next-Gen Engine, Images, Lists, Export to DOCX and PDF, and More"},"content":{"rendered":"

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<\/a>. The result is version 2.0 of our JavaScript component, delivering reworked architecture, improved performance, and multiple new features for effective content management.<\/p>\n

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\u2019s 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.<\/p>\n

These changes should help developers build more user-friendly UIs, while end-users can expect much easier access to what they need.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Rich Text Editor v2.0<\/div>\n\t\t
Estimate the updated functionality for delivering a feature-packed text editor<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Let us get acquainted with these and other new features of the Rich Text Editor in more detail.<\/p>\n

New Capabilities in Toolbar Configuration<\/h5>\n

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.<\/p>\n

Using the updated toolbar<\/a><\/strong> 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:<\/p>\n

new<\/span> richtext.Richtext<\/span>(<\/span>"#root"<\/span>,<\/span> {<\/span>
\ntoolbar:<\/span> [<\/span>
\n"undo"<\/span>,<\/span> "style"<\/span>,<\/span> "bold"<\/span>,<\/span> "italic"<\/span>,<\/span> "underline"<\/span>,<\/span> "text-color"<\/span>,<\/span>
\n"align"<\/span>,<\/span> "link"<\/span>
\n]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here is the list of controls<\/a> currently available for the toolbar.<\/p>\n

The updated defaultStyles<\/a><\/strong> property allows default style values for particular block types:<\/p>\n

defaultStyles:<\/span> {<\/span>
\n"*"<\/span>:<\/span> {<\/span>
\n"font-family"<\/span>:<\/span> "Tahoma"<\/span>,<\/span>
\n"font-size"<\/span>:<\/span> "14px"<\/span>
\n}<\/span>,<\/span>
\nh1:<\/span> {<\/span>
\n"font-size"<\/span>:<\/span> "32px"<\/span>,<\/span>
\n"color"<\/span>:<\/span> "#333"<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

Apart from that, you can use the toolbar<\/a><\/strong> property to specify custom toolbar controls, like the “Count Characters” button in the example below:
\n\"toolbar<\/p>\n

const<\/span> toolbar =<\/span> [<\/span>
\n\/\/ Other configuration settings<\/span>
\n{<\/span>
\ntype:<\/span> "button"<\/span>,<\/span>
\nid:<\/span> "custom"<\/span>,<\/span>
\ncss:<\/span> "wx-primary"<\/span>,<\/span>
\nlabel:<\/span> "Count characters"<\/span>,<\/span>
\nhandler:<\/span> (<\/span>)<\/span> =&<\/span>gt;<\/span> {<\/span>
\nconst<\/span> text =<\/span> widget.getValue<\/span>(<\/span>richtext.text<\/span>.toText<\/span>)<\/span>;<\/span>
\nconst<\/span> charCount =<\/span> text.replace<\/span>(<\/span>\/\\s\/g<\/span>,<\/span> ""<\/span>)<\/span>.length<\/span>;<\/span>
\ndocument.getElementById<\/span>(<\/span>"count"<\/span>)<\/span>.innerText<\/span> =<\/span> charCount;<\/span>
\n}<\/span>
\n}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

Menubar for Intuitive Access to Editor Actions<\/h5>\n

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.<\/p>\n

\"menubarCheck the sample ><\/a><\/p>\n

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.<\/p>\n

Under the hood, this functionality is enabled by setting the value of the menubar<\/a><\/strong> property to true<\/em> in the RichText configuration.<\/p>\n

const<\/span> widget =<\/span> new<\/span> richtext.Richtext<\/span>(<\/span>"#richtext"<\/span>,<\/span> {<\/span>
\nmenubar:<\/span> true<\/span>
\n\/\/ other configuration properties<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

All in all, the menubar is a nice addition to the toolbar, enhancing the editor\u2019s structural flexibility and usability.<\/p>\n

The menubar, in combination with a highly configurable toolbar, will help efficiently accommodate new editor features described in the following sections.<\/p>\n

New Tools for Managing Content<\/h5>\n

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:<\/p>\n

1) Layout-enhancing operations<\/h6>\n

You can visually diversify the content and improve its readability thanks to the added support of:<\/p>\n