Style the Font Names in the Editor

Environment

Product	Progress® Kendo UI® Editor for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I style the names of each font in the fontNames drop-down of the Editor?

Solution

1. Get a reference to the fontNames ComboBox.
2. Change the styles by using a template and the setOptions method.

<textarea id="editor" rows="10" cols="30" style="width:100%;height:200px">
    Sample text
</textarea>

<script>
    $("#editor").kendoEditor({
        tools: [
            "bold",
            "italic",
            "underline",
          {
            name: "fontName",
            items: [
                { text: "Andale Mono", value: "Andale Mono"},
                { text: "Arial", value: "Arial"},
                { text: "Arial Black", value: "Arial Black" },
                { text: "Book Antiqua", value: "Book Antiqua" },
                { text: "Comic Sans MS", value: "Comic Sans MS" },
                { text: "Courier New", value: "Courier New" },
                { text: "Georgia", value: "Georgia" },
                { text: "Helvetica", value: "Helvetica" },
                { text: "Impact", value: "Impact" },
                { text: "Symbol", value: "Symbol" },
                { text: "Tahoma", value: "Tahoma" },
                { text: "Terminal", value: "Terminal" },
                { text: "Times New Roman", value: "Times New Roman" },
                { text: "Trebuchet MS", value: "Trebuchet MS" },
                { text: "Verdana", value: "Verdana" },
                { text: "Webdings", value: "Webdings" },
                { text: "Wingdings", value: "Wingdings" }
            ]
        }

        ]
    });

    var cb = $(".k-combobox [data-command='fontName']").data("kendoComboBox");      
    cb.setOptions({
        template: "<span style='font-family: #: text #'>#: text #</span>"
    });
</script>