Parsing and Serialization in HTML and Markdown formats
Our rich text editor is aimed at processing content in HTML and Markdown formats. The setValue method allows parsing a text in the standard HTML format or Markdown format, which is fulfilled with the help of the Marked.js parser.
`<p><i>Read more in</i><a href="https://docs.dhtmlx.com"><i>documentation</i></a></p>.`
The getValue method enables the serialization of your edited and formatted text in HTML or Markdown:
var content = richtext.getValue("markdown");
Modes for Convenient Editing
The text editor is equipped with two built-in modes 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 mode configuration option. Check the sample >
Classic modeDocument mode
Besides, you can add a special toolbar control for enabling a fullscreen mode in the process of editing the text if necessary. The API methods let you enter or exit the fullscreen mode:
// exit full screen
The toolbar structure can be modified depending on your requirements via the toolbarBlocks 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:
// full toolbar
"undo", "style", "decoration", "colors",
"align", "link", "clear", "fullscreen"
Toolbar with all blocks of controls
You are free to change the order of controls’ arrangement and apply a wide range of customization options.
Adjusting the toolbar controls to your needs takes little effort, as the data collection API supplies you with all the necessary methods.
For instance, it’s possible to add a custom button, which will serve to show the number of characters in the text:
value: "Count Characters",
This operation is possible due to the getStats method:
You can also specify in which part of your app you’d like to display the result of the operation. Check documentation >
Initialization with Angular, React, and Vue.js
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:
So, let’s get started!