{"id":5745,"date":"2018-12-13T12:51:01","date_gmt":"2018-12-13T09:51:01","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5745"},"modified":"2026-09-24T18:20:39","modified_gmt":"2026-09-24T15:20:39","slug":"dhtmlxrichtext-1-0-launching-brand-new-javascript-rich-text-editor","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxrichtext-1-0-launching-brand-new-javascript-rich-text-editor\/","title":{"rendered":"dhtmlxRichText 1.0: Launching a Brand New JavaScript Rich Text Editor"},"content":{"rendered":"<p>Today DHTMLX library is joined by a brand new JavaScript component for real-time text editing &#8211; dhtmlxRichText!<\/p>\n<p>The new component is a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText\/\" target=\"_blank\" rel=\"noopener\">JavaScript rich text editor<\/a> with support for parsing and serialization in HTML and Markdown formats. It has a flexible structure with an adjustable toolbar, two modes for displaying the editor in the most convenient way, fullscreen mode, and support for localization. The editor is compatible with all major browsers, including IE11+. The component goes with special wrappers for the most widely used client-side frameworks &#8211; <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText-for-Angular\/\" target=\"_blank\" rel=\"noopener\">Angular<\/a>, <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText-for-React\/\" target=\"_blank\" rel=\"noopener\">React<\/a>, and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText-for-Vue\/\" target=\"_blank\" rel=\"noopener\">Vue.js<\/a>.<\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText\/download.shtml\" target=\"_blank\" rel=\"noopener\"><strong>Download a free Trial version of dhtmlxRichText 1.0 &gt;<\/strong><\/a><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/7ecdL4GOWkI\" width=\"800\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h5>Parsing and Serialization in HTML and Markdown formats<\/h5>\n<p>Our rich text editor is aimed at processing content in HTML and Markdown formats. The <strong>setValue<\/strong> method allows parsing a text in the standard HTML format or Markdown format, which is fulfilled with the help of the <a href=\"https:\/\/github.com\/markedjs\/marked\" target=\"_blank\" rel=\"noopener\">Marked.js<\/a> parser.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> htmlText <span class=\"sy0\">=<\/span> `<\/div><\/div>\n<h1>Meet DHTMLX Rich Text Editor!<\/h1>\n<p>` +<br \/>\n`<\/p>\n<p>The demo will show you a customizable JavaScript rich text editor.<\/p>\n<p>` +<br \/>\n`<\/p>\n<p><i>Read more in<\/i><a href=\"https:\/\/docs.dhtmlx.com\"><i>documentation<\/i><\/a><\/p>\n<p>.`<\/p>\n<p>richtext.setValue(htmlText);<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5751\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/parse.gif\" alt=\"Parse HTML and Markdown\" width=\"950\" height=\"400\" \/><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/01_init\/03_set_html_value.html\" target=\"_blank\" rel=\"noopener\">Check parsing HTML sample &gt;<\/a><br \/>\n<a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/01_init\/04_set_markdown_value.html\" target=\"_blank\" rel=\"noopener\">Check parsing Markdown sample &gt;<\/a><\/p>\n<p>The <strong>getValue<\/strong> method enables the serialization of your edited and formatted text in HTML or Markdown:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ getting content in the markdown format<\/span><br \/>\n<span class=\"kw1\">var<\/span> content <span class=\"sy0\">=<\/span> richtext.<span class=\"me1\">getValue<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;markdown&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5753\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/serialize.gif\" alt=\"Serialize HTML or Markdown\" width=\"950\" height=\"400\" \/><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/03_usage\/01_get_value.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<h5>Modes for Convenient Editing<\/h5>\n<p>The text editor is equipped with two <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/guides\/configuration\/#workingmodes\" target=\"_blank\" rel=\"noopener\">built-in modes<\/a> for arranging its layout in the most suitable way to meet your needs: classic mode and document mode. You can define the desired mode on the initialization stage via the <strong>mode<\/strong> configuration option. <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/02_configuration\/01_modes.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5759\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/classic900.png\" alt=\"Classic mode\" width=\"900\" height=\"225\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/classic900.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/classic900-300x75.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/classic900-768x192.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/>Classic mode<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5760\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/document900.png\" alt=\"Document mode\" width=\"900\" height=\"225\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/document900.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/document900-300x75.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/document900-768x192.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/>Document mode<\/p>\n<p>Besides, you can add a special toolbar control for enabling a <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/api\/config\/fullscreen-mode\/\" target=\"_blank\" rel=\"noopener\">fullscreen mode<\/a> in the process of editing the text if necessary. The API methods let you enter or exit the fullscreen mode:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ enter full screen<\/span><br \/>\nrichtext.<span class=\"me1\">fullScreen<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>\/\/ exit full screen<br \/>\nrichtext.exitFullScreen();<\/p>\n<h5>Adjustable Toolbar<\/h5>\n<p>The <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/guides\/configuration\/#toolbar\" target=\"_blank\" rel=\"noopener\">toolbar structure<\/a> can be modified depending on your requirements via the <strong>toolbarBlocks<\/strong> configuration option. There are default blocks of controls: Undo, Style, Decoration, Colors, Align, and Link blocks, and two additional controls: Clear and Fullscreen, which can be included in the toolbar:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> richtext <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">RichText<\/span><span class=\"br0\">&#40;<\/span>document.<span class=\"me1\">body<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n<span class=\"co1\">\/\/ full toolbar<\/span><br \/>\ntoolbarBlocks<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"st0\">&quot;undo&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;style&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;decoration&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;colors&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"st0\">&quot;align&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;link&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;clear&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;fullscreen&quot;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5765\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/fulltoolbar900.png\" alt=\"Full toolbar\" width=\"953\" height=\"55\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/fulltoolbar900.png 953w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/fulltoolbar900-300x17.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/fulltoolbar900-768x44.png 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/>Toolbar with all blocks of controls<br \/>\nYou are free to change the order of controls&#8217; arrangement and apply a wide range of customization options.<\/p>\n<h5>Flexible Customization<\/h5>\n<p>Our JavaScript text editor provides such customization possibilities as changing the icon font pack, adding custom toolbar controls, updating or deleting the existing controls.<\/p>\n<p>By default, the editor makes use of the <a href=\"https:\/\/pictogrammers.com\/library\/mdi\/?welcome\" target=\"_blank\" rel=\"noopener\">Material-style<\/a> icons. However, you can replace them with any other icon font pack like <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a>. <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/04_customization\/01_custom_icons.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<p>Adjusting the toolbar controls to your needs takes little effort, as the data collection API supplies you with all the necessary methods.<\/p>\n<p>For instance, it&#8217;s possible to add a custom button, which will serve to show the number of characters in the text:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">rich.<span class=\"me1\">toolbar<\/span>.<span class=\"me1\">data<\/span>.<span class=\"me1\">add<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\ntype<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;button&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\nvalue<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Count Characters&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\nid<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;calc&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">24<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5754\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/12\/custom_buttons.gif\" alt=\"Custom Toolbar Button\" width=\"950\" height=\"400\" \/><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/samples\/04_customization\/02_custom_button.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<p>This operation is possible due to the <strong>getStats<\/strong> method:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> chars <span class=\"sy0\">=<\/span> richtext.<span class=\"me1\">getStats<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">chars<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<p>You can also specify in which part of your app you&#8217;d like to display the result of the operation. <a href=\"https:\/\/docs.dhtmlx.com\/richtext\/api\/config\/fullscreen-mode\/\" target=\"_blank\" rel=\"noopener\">Check documentation &gt;<\/a><\/p>\n<h5>Initialization with Angular, React, and Vue.js<\/h5>\n<p>dhtmlxRichText provides specially tailored initialization guides for the most popular client-side frameworks: Angular, React, and Vue.js. It makes implementing the editor in apps based on different technologies much quicker. Check documentation:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/guides\/integration_with_angular\/\" target=\"_blank\" rel=\"noopener\">Integration with Angular<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/guides\/integration_with_react\/\" target=\"_blank\" rel=\"noopener\">Integration with React<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/guides\/integration_with_vue\/\" target=\"_blank\" rel=\"noopener\">Integration with Vue.js<\/a><\/li>\n<\/ul>\n<p>So, let&#8217;s get started!<\/p>\n<p>Get a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText\/download.shtml\" target=\"_blank\" rel=\"noopener\">30-day free trial<\/a>, evaluate our JavaScript rich text editor, leave us your feedback and ideas on the features you&#8217;d prefer to see in the following releases in the comments&#8217; section or <a href=\"https:\/\/dhx-surveys.typeform.com\/to\/jrBOve\" target=\"_blank\" rel=\"noopener\">through the survey here<\/a>.<\/p>\n<p>By the way, dhtmlxRichText is a complementary component in the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/licenses.shtml#bundles\" target=\"_blank\" rel=\"noopener\">Complete bundle<\/a> &#8211; get more JavaScript widgets and save money!<\/p>\n<h5>Related Material:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/richtext\/\" target=\"_blank\" rel=\"noopener\">JavaScript Rich Text Editor documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/pdh5buvg?tag=richtext\" target=\"_blank\" rel=\"noopener\">Samples<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxRichText\/download.shtml\" target=\"_blank\" rel=\"noopener\">Free trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Today DHTMLX library is joined by a brand new JavaScript component for real-time text editing &#8211; dhtmlxRichText! The new component is a JavaScript rich text editor with support for &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":5756,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,1,38],"tags":[33,59,56,61,4,55],"class_list":["post-5745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-angular","tag-react","tag-richtext","tag-dhtmlx-updates","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=5745"}],"version-history":[{"count":7,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5745\/revisions"}],"predecessor-version":[{"id":14930,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5745\/revisions\/14930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5756"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}