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.
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:
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:
"*": {
"font-family": "Tahoma",
"font-size": "14px"
},
h1: {
"font-size": "32px",
"color": "#333"
}
}
Apart from that, you can use the toolbar property to specify custom toolbar controls, like the “Count Characters” button in the example below:
// 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;
}
}
];
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.
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.
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:
- Image management (adding, resizing, etc.)
- Content arrangement in lists (ordered and unordered)
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
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.
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:
- DHTMLX RichText with React
- DHTMLX RichText with Angular
- DHTMLX RichText with Vue
- DHTMLX RichText with Svelte
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.