how to add kendo editor tool image which is not in sprite.png

390 Views Asked by At

enter image description here Image shows the last icon which do not have image in sprite.png and i have tried to add font awesome icon image and even it is not working. I am using kendo-ui 2021 version now. This is the code I am using and I am unable to add icon image print,clear formation and 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);
                }                
            }           
        });****
1

There are 1 best solutions below

2
Rose On

I have tried using customer tools in kendo, and insert the relevant images as png and give the image url in style tag.

code inside the kendoEditor:

     $("#quest").kendoEditor({
       tools[{
                name: "print",
                tooltip: "print",
                exec: function (e) {
                }
            }

]

styles:

<style>

.k-editor .k-i-print {
 background: 50% 50% no-repeat 
              url(https://localhost/cisiweb2/image/master/print.png);
    }
</style>