Skip to main content

Properties

customStats​

Defines the logic of displaying custom statistics

customStats?: array;

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 sample: 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

defaultStyles​

Defines default values of the toolbar selection controls

defaultStyles?: object;

var richtext = new dhx.Richtext("richtext_container", {
    defaultStyles: {
        "font-size": "14px"
        "font-family": "Tahoma"
    }
});

Default value:

var defaultStyles = {
    "font-family": "Roboto",
    "font-size": "14px",
    "color": "#4D4D4D",
    "background": "#FFFFFF",
    "bold": false,
    "italic": false,
    "strike": false,
    "underline": false,
    "align": "left", // "left" | "center" | "right" | false
};

Related sample: RichText. Default styles

mode​

The working mode of the RichText editor

mode?: string;

Values: "default", "document"

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

Default value: "default"

Related sample: RichText. Modes

toolbarBlocks​

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

toolbarBlocks?: array;

// 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 sample: 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 sample: 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