如何为Kendo UI Editor添加不在sprite.png中的自定义工具图标

上图展示了最后一个未在sprite.png中内置对应图标的工具，我尝试添加Font Awesome图标也未能生效。我当前使用的是2021版本的Kendo UI，目前无法为print、clear formation、copy format工具添加对应的图标，所用代码如下：

$("#a").kendoEditor({
    imageBrowser: {
        transport: {
            read: "@Url.Action("Read", "Controllername")",
            destroy: {
                url: "@Url.Action("Destroy", "Controllername")",
                type: "POST"
            },
            create: {
                url: "@Url.Action("Create", "Controllername")",
                type: "POST"
            },
            thumbnailUrl: "@Url.Action("Thumbnail", "Controllername")",
            uploadUrl: "@Url.Action("Upload", "Controllername")",
            imageUrl: "@Url.Action("Image?path={0}", "Controllername")",
        }
    },
    tools: [
        "formatting",
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent",
        "createLink",
        "unlink",
        "insertImage",
        "subscript",
        "superscript",
        "tableWizard",
        "createTable",
        "addRowAbove",
        "addRowBelow",
        "addColumnLeft",
        "addColumnRight",
        "deleteRow",
        "deleteColumn",
        "foreColor",
        "backColor",
        "print"
    ],
    execute: function (e) {
        var editor = this;
        if (e.name == "createtable") {
            setTimeout(function () {
                var table = $(editor.body).find("table:not(.custom-table)");
                table.addClass("custom-table");
                table.attr("style", "border: 1px solid black;");
                table.find("tr td")
                    .each(function () {
                        var currentStyle = $(this).attr("style");
                        $(this).attr("style", currentStyle + " border: 1px solid black; ");
                    });
            }, 0);
        }                
    }           
});

解决方案 #

2021版Kendo UI Editor未内置打印、清除格式、格式刷三类工具的默认图标映射，直接以字符串形式声明工具时无法匹配到对应图标，按以下步骤修改即可正常显示：

• 调整tools字段配置，将需要自定义图标的工具从字符串改为对象格式，指定工具名称和自定义图标类
• 新增对应CSS样式，可按需使用Kendo内置图标或Font Awesome图标

代码示例

修改后的tools配置片段：

tools: [
    // 其余原有工具配置保持不变
    {
        name: "print",
        tooltip: "打印",
        iconClass: "k-icon k-i-print" // 使用Kendo内置打印图标
        // 若使用Font Awesome，替换为 iconClass: "fa fa-print" 并补充下方适配CSS
    },
    {
        name: "clearFormat",
        tooltip: "清除格式",
        iconClass: "k-icon k-i-erase"
    },
    {
        name: "copyFormat",
        tooltip: "格式刷",
        iconClass: "k-icon k-i-format-painter"
    }
]

若使用Font Awesome，需补充适配CSS：

.k-editor-toolbar .fa {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
}

内容的提问来源于stack exchange，提问作者Rose