{"id":5964,"date":"2019-02-27T13:54:47","date_gmt":"2019-02-27T10:54:47","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5964"},"modified":"2026-01-23T13:26:20","modified_gmt":"2026-01-23T10:26:20","slug":"dhtmlxrichtext-1-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxrichtext-1-1\/","title":{"rendered":"dhtmlxRichText 1.1: API to Work with Text, Block Quotes, and Advanced Statistics"},"content":{"rendered":"

A recently launched dhtmlxRichText, JavaScript rich text editor<\/a>, receives its first minor update v1.1 with expanded functionality. We’ve provided developers with an easy and convenient way to work with content instantly via the editor’s API. The release also brings out a new toolbar block quote control for adding text quotes, an ability to serialize content into plain text, and advanced statistics for counting the number of characters, words and other text elements.
\n\"Rich<\/p>\n

Download JavaScript rich text trial<\/a> version 1.1 and let’s dive deeper into the release details!<\/p>\n

Working With Rich Text Editor API<\/h5>\n

Starting with v1.1 developers gain access to the API of our JavaScript rich text editor that enables them to work with the text directly. Using the getEditorAPI()<\/strong> method you will get all the available methods for text processing such as adding a new text into the editor, styling it, adding a data model or returning it in the JSON format.<\/p>\n

For example, the update()<\/strong> method helps you to change the style of a text, e.g. apply a new style to it:<\/p>\n

var<\/span> api =<\/span> rich.getEditorAPI<\/span>(<\/span>)<\/span>;<\/span>
\n 
\nrich.getEditorAPI<\/span>(<\/span>)<\/span>.update<\/span>(<\/span>{<\/span>
\n    modifier:<\/span> "color"<\/span>,<\/span>
\n    value:<\/span> "#BB2B1A"<\/span>
\n  }<\/span>,<\/span> api.getSelection<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Editor with Quotation Marks<\/h5>\n

We’ve added a new block quote control<\/a> to our set of default toolbar controls to easily turn ordinary text into quotations:<\/p>\n

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

The block quote control is included in the toolbar by default. Additionally, you can include a new statistics control for displaying a number of characters or other elements:<\/p>\n

var<\/span> richtext =<\/span> new<\/span> dhx.Richtext<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    \/\/ full toolbar<\/span>
\n    toolbarBlocks:<\/span> [<\/span>
\n        "undo"<\/span>,<\/span> "style"<\/span>,<\/span> "decoration"<\/span>,<\/span> "colors"<\/span>,<\/span>
\n        "align"<\/span>,<\/span> "link"<\/span>,<\/span> "clear"<\/span>,<\/span> "stats"<\/span>,<\/span> "fullscreen"<\/span>]<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Advanced and Custom Statistics<\/h5>\n

New API methods make RichText a more effective tool for text processing. From now on, our editor is able to count<\/a> both characters with and without spaces as well as words using the getStats()<\/strong> method.<\/p>\n

var<\/span> stats =<\/span> richtext.getStats<\/span>(<\/span>)<\/span>;<\/span>
\n{<\/span>chars:<\/span> 467<\/span>,<\/span> words:<\/span> 80<\/span>,<\/span> charsExlSpace:<\/span> 393<\/span>}<\/span><\/div><\/div>\n

The number of all counted elements can be displayed together or separately, depending on the needs of end-users.<\/p>\n

Showing the number of characters including spaces in a text:<\/p>\n

var<\/span> chars =<\/span> richtext.getStats<\/span>(<\/span>)<\/span>.chars<\/span>;<\/span><\/div><\/div>\n

Showing the number of words in a text:<\/p>\n

var<\/span> chars =<\/span> richtext.getStats<\/span>(<\/span>)<\/span>.words<\/span>;<\/span><\/div><\/div>\n

Showing the number of characters without spaces in a text:<\/p>\n

var<\/span> chars =<\/span> richtext.getStats<\/span>(<\/span>)<\/span>.charsExlSpace<\/span>;<\/span><\/div><\/div>\n

You can also determine where and how to display the numbers counted by RichText. For instance, the editor may show these statistics in a separate container after an end user clicks on a button.<\/p>\n

However, the abilities of RichText are not limited to counting just words and characters. With the help of the customStats<\/strong> configuration property<\/a> you can get any statistical characteristics you need (for example, a number of sentences):<\/p>\n

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

Plain Text Format<\/h5>\n

Besides converting content into HTML and Markdown formats, RichText gets an ability to serialize it into plain text<\/a> via the getValue()<\/strong> method:<\/p>\n

\/\/ getting content as a plain text<\/span>
\nvar<\/span> content =<\/span> richtext.getValue<\/span>(<\/span>"text"<\/span>)<\/span>;<\/span><\/div><\/div>\n
Other Enhancements<\/h5>\n

Apart from new features, our dev team made a couple of improvements in the existing functionality. Among the most essential updates is support for the Asian languages. You can find the whole list in our docs<\/a>. <\/p>\n

Hope you’ll enjoy the update and find the newly added features useful for your applications! In any case, we invite you to share your ideas and feedback in our 1-minute survey<\/a>. Also, feel free to leave your comments below!<\/p>\n

If you’re interested in our plans for future development of rich text editor, consult its public roadmap<\/a> and influence the development by voting for your preferred functionality.<\/p>\n

Current clients will find a download link for the updated version in their Client’s Area<\/a>. <\/p>\n

Related Material:<\/h5>\n

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

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

Learn more about all the available API methods<\/a> in the documentation.<\/p>\n