Configuration

With RichText configuration options, you can make your work with text even more comfortable. It is possible to define the desired working mode and set the blocks of toolbar buttons you need in the order you want.

Working modes

There are two modes of RichText editor between which you can select to get the best working place for creating your perfect texts. The modes are:

  • "classic"

Classic mode

  • "document"

Document mode

To specify the desired mode, you need to define it in the mode option of the Richtext configuration object during initialization of the component:

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

Related sample:  RichText Editor modes

Toolbar

Default toolbar

The RichText toolbar consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: "undo", "style", "decoration", "colors", "align", "link".

The structure of toolbar is defined via the toolbarBlocks configuration option of the component, which is an array with strings presenting the names of controls.

var richtext = new dhx.Richtext(document.body, {
    // default toolbar
    toolbarBlocks: [
        "undo", "style", "decoration", "colors", 
        "align", "link"
    ]
});

Default toolbar

Related sample:  Basic initialization

You can add two more blocks: "clear" and "fullscreen" to make the full toolbar.

var richtext = new dhx.Richtext(document.body, {
    // full toolbar
    toolbarBlocks: [
        "undo", "style", "decoration", "colors", 
        "align", "link", "clear", "fullscreen"
    ]
});

Full toolbar

Related sample:  Full toolbar

Short toolbar definition

There is also a possibility to specify the default set of buttons via the "default" definition in the toolbarBlocks array, like this:

var richtext = new dhx.Richtext(document.body, {
    // full toolbar
    toolbarBlocks: ["default", "clear", "fullscreen"]
});

where the "default" string includes the default set of controls: "undo", "style", "decoration", "colors", "align" and "link".

Custom toolbar

You can specify your own structure of the toolbar by enumerating necessary elements of the toolbarBlocks array in the desired order, for example:

var richtext = new dhx.Richtext(document.body, {
    toolbarBlocks: ["clear", "colors", "align","decoration", 
        "undo", "fullscreen","link"
    ]
});

Custom toolbar

Related sample:  Configuration of toolbar blocks

Toolbar is highly customizable. You can add new controls, change the icons of controls and apply the desired icon pack.

Back to top