Edit this page

Create custom tool

Environment

Product Version 2018.1.117
Product Editor for ProgressĀ® Kendo UIĀ®

Description

Do you have a suggestion on how I could add a font-weight tool to the Editor, which value changes based on the selected font.

Solution

To achieve the desired result, a new tool for the Kendo UI Editor is registered as follows:

<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.
</textarea>

<script>
    kendo.ui.editor.EditorUtils.registerTool(
        "fontWeight",
        new kendo.ui.editor.FontTool({
            cssAttr:"font-weight",
            domAttr: "fontWeight",
            name:"fontWeight",
            defaultValue: [{ text: "fontWeight",  value: "normal" }],
            template: new kendo.ui.editor.ToolTemplate({
                template: kendo.ui.editor.EditorUtils.comboBoxTemplate,
                title: "Font Size"
            })
        })
    );

    var editor = $("#editor").kendoEditor({
        tools: [
            {
                name: "fontWeight",
                items: [
                    { text: "bold", value: "900" }
                ]
            },
            "fontName"
        ],
        messages: {
            fontWeight: "normal",
        }
    }).getKendoEditor();

    var fontNameCombo = kendo.widgetInstance($(editor.wrapper.find("select.k-fontName")[0]));

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

        fontWeightCombo.setDataSource([
            { text: "Light", value: "300" },
            { text: "Medium", value: "500" },
            { text: "Bold", value: "900" },
        ]);
    }

    fontNameCombo.bind("change", fontNameComboChange);
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy