Initialization

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>
<html>
    <head>
        <title>How to Start with dhtmlxRichText</title>         
        <script type="text/javascript" src="../../codebase/richtext.js"></script>
        <link rel="stylesheet" href="../../codebase/richtext.css">
    </head>
    <body>
        <div id="richtext_container"></div>
        <script>
            // creating dhtmlxRichText 
            var richtext = new dhx.Richtext("richtext_container");
</script> </body> </html>

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:

richtext.html

<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;
  • docs - the full documentation of the component.

Creating container

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

richtext.html

<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,
  • an object with configuration properties. See the full list below.

richtext.html

// creating dhtmlxRichText
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

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

var richtext = new dhx.Richtext("richtext_container", { 
    mode:"document"
});

Related sample:  RichText Editor modes

Back to top