Skip to main content

Properties

customStats​

Defines the logic of displaying custom statistics

array customStats;

var richtext = new dhx.Richtext("richtext_container", {
    customStats: [
        {
            name: "chars"
        },
        {
            name: "words"
        },
        {
            name: "sentences",
            cb: function(text) {
                var rawSentences = text.split(/[.?!]+/);
                var count = 0;
                for (var i=0; i<rawSentences.length; i++) {
                    if (rawSentences[i].length > 0) {
                        count += 1;
                    }
                }
                return count;
            }
        }
    ],
    toolbarBlocks: ["default", "stats"]
});

Related samples: Custom stats

Details​

Each field of statistical data represents an object with two properties:

  • name - (string) the name of the field that should be displayed
  • callback - (function) a function that implements the logic of counting entries of the specified field

mode​

The working mode of the RichText editor

string mode;

Values: "default","document"

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

Default value: "default"

Related samples: RichText. Modes

toolbarBlocks​

Specifies blocks of buttons that will be shown in the Richtext toolbar

array toolbarBlocks;

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

Default value: ["undo", "style", "decoration", "colors", "align", "link"]

Related samples: RichText. Initialization

Details​

Full toolbar​

The full toolbar contains several more blocks: "clear", "fullscreen", and "stats":

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

Related samples: RichText. Full Toolbar

Short toolbar definition​

The default set of buttons can be specified via the "default" definition in the toolbarBlocks array, like this:

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

Custom toolbar​

It is also possible to create a custom toolbar by setting desired blocks in the random order:

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

Related sample: Toolbar Blocks