New to Kendo UI for jQuery? Download free 30-day trial

Create Custom Editor Tool


Product Version 2023.1.315
Product Progress® Kendo UI® Editor for jQuery


How can I add a font-weight tool to the Editor whose value changes based on the selected font?


Register a new tool for the Editor.

<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
    Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br>
    In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling.
    The widget outputs identical HTML across all major browsers, follows accessibility standards and provides API for content manipulation.

        new kendo.ui.editor.FontTool({
            domAttr: "fontWeight",
            items: [
                { text: "bold", value: "900" }
            defaultValue: [{ text: "fontWeight",  value: "normal" }],
            ui: {
                type: "component",
                component: "ComboBox",
                componentOptions: {
                    dataValueField: "value",
                    dataTextField: "text"

    var editor = $("#editor").kendoEditor({
        tools: [
        messages: {
            fontWeight: "normal",

    var fontNameCombo = kendo.widgetInstance($(editor.wrapper.find("input[data-command=fontName]")[0]));

    function fontNameComboChange(e) {
        var fontWeightCombo = kendo.widgetInstance($(editor.wrapper.find("input[data-command=fontWeight]")[0]));

            { text: "Light", value: "300" },
            { text: "Medium", value: "500" },
            { text: "Bold", value: "900" },

    fontNameCombo.bind("change", fontNameComboChange);

See Also

In this article