Skip to main content


The current article will guide you through simple steps you need to take in order to insert a compact text editor into your application. All in all, you should complete just three steps:

  1. Include the RichText source files on a page.
  2. Create a container for RichText.
  3. Initialize RichText with the object constructor.
<!DOCTYPE html>
<title>How to Start with DHTMLX Richtext</title>
<script type="text/javascript" src="../../codebase/richtext.js"></script>
<link rel="stylesheet" href="../../codebase/richtext.css">
<div id="richtext_container"></div>
// creating DHTMLX Richtext
var richtext = new dhx.Richtext("richtext_container");

Including source files

Download the package and unpack it into a folder of your project.

To create dhtmlxRichText, you need to include 2 source files on your page:

  • richtext.js
  • richtext.css

Make sure that you set correct relative paths to these files:

<script type="text/javascript" src="codebase/richtext.js"></script>  
<link rel="stylesheet" href="codebase/richtext.css">

The structure of the RichText package is the following:

  • sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
  • codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
  • samples - the code samples.

Creating container

Add a container for RichText and give it an id, for example "richtext_container":

<div id="richtext_container"></div>

Initializing RichText

Initialize RichText with the dhx.Richtext object constructor. The constructor has two parameters:

  • the HTML container for RichText. The one we have created at the previous step.
  • an object with configuration properties. See the full list below.
// creating RichText
var richtext = new dhx.Richtext("richtext_container", {
// config options

Configuration properties

This is a list of properties that you can specify in the Richtext configuration object:

  • mode - (string) the working mode of RichText. Can be either default or document.
  • toolbarBlocks - (array) specifies blocks of buttons that will be shown in the Richtext toolbar
  • customStats - (array) defines the logic of displaying custom statistics

You can set configuration options during initialization as the second parameter of the constructor:

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

Related sample: Modes