Skip to main content

API overview


var richtext = new dhx.Richtext("richtext_container", {


  • an HTML container (or the ID of an HTML container)
  • an object with configuration properties (check below)


destructorreleases occupied resources
exitFullScreenexits the full screen mode
fullScreenenters the full screen mode
getEditorAPIreturns the full list of the editor API
getValuegets the content entered into the RichText editor
getStatsreturns statistics on the entered content
paintrepaints RichText
setValuesets the provided content into the RichText editor

Event Bus methods

detachdetaches a handler from an event (which was attached before by the on() method)
firetriggers an inner event
onattaches a handler to an inner event of Vault


Actionfires on any action in the editor
Changefires on any change in the editor
selectionChangefires on change of selection by a user
selectionRefreshfires on automatic returning of cursor into the editor


customStatsdefines the logic of displaying custom statistics
modethe working mode of the RichText editor
toolbarBlocksspecifies blocks of buttons that will be shown in the Richtext toolbar

Editor API methods

var EditorAPI = richtext.getEditorAPI();
addadds a new text into the editor
getModelreturns the data model of the entered text in the JSON format
getPositionreturns the position of text selection relative to the browser window
getSelectionreturns the position of text selection relative to all other text
removeremoves a selected text
setModelsets a structured text with styles (a data model as JSON) for the editor
setSelectionapplies selection to the specified text position
updatemodifies the entered text

Toolbar methods

addadds a new control to the toolbar
removeremoves a control from the toolbar
updateupdates configuration options of the control

Toolbar controls

Besides using the default controls of the toolbar, you can customize the toolbar by adding the following controls:

Buttona simple button that can have an icon
Custom HTMLan item that contains any custom HTML content (for example, an image, icon or other element)
ImageButtona button with an image
SelectButtona button that contains a drop-down list of options
Separatora horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other
Spacerthe item takes space on the toolbar and is used for aligning controls