Edit this page

Style the Font Names in Editor

Environment

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

Description

How to style the names of each font in the fontNames dropdown 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 = $("select.k-fontName").data("kendoComboBox");          
    cb.setOptions({
        template: "<span style='font-family: #: text #'>#: text #</span>"
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy