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" - to undo/redo recent actions
  • "style" - to change the font, font size, turn plain text into a heading and vice versa, and make a quote out of the text
  • "decoration" - to make text bold, italic, underlined or strike-through
  • "colors" - to change the color of the text or its background
  • "align" - to adjust the alignment of the text on a page
  • "link" - to add a link into the text

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 several more blocks to make the full toolbar:

  • "clear" - to clear formatting applied to the text
  • "fullscreen" - to enter/exit the full screen mode
  • "stats" - to display statistics about the text: the count of words, characters and characters excluding spaces or some custom statistical data
var richtext = new dhx.Richtext(document.body, {
    // full toolbar
    toolbarBlocks: [
        "undo", "style", "decoration", "colors", "align",
        "link", "clear", "stats", "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", "stats", "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 the 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