By default, the Kendo Editor Image Browser is only able to insert HTML with the attributes src, alt, height and width. In order to add additional attributes, such as srcset to make images responsive or a custom data- field, this default behavior can be overridden. Just change the function kendo.ui.editor,ImageCommand.fn.insertImage to a custom function to insert the image HTML. In this example, the default function is first stored in a variable before overwriting it. The filename of the image is extracted from the image src, then the default insertImage function is called. After it is called, the inserted image is found and the custom data- field data-filename is added.

<script>
    var insertImage = kendo.ui.editor.ImageCommand.fn.insertImage;
    kendo.ui.editor.ImageCommand.fn.insertImage = function (img, range) {
        var imgsrc = this.attributes.src;
        var filenameloc = imgsrc.search("path=");
        var datafilename = imgsrc.slice(filenameloc + 5);
        insertImage.call(this, img, range);
        if (img) {
            img.setAttribute("data-filename", datafilename);
        } else {
            var images = range.startContainer.getElementsByTagName("img");
            for (var i = 0; i < images.length; i++) {
                if (images[i].attributes.src.value == imgsrc
                    && images[i].attributes.hasOwnProperty("data-filename") == false) {
                    images[i].setAttribute("data-filename", datafilename);
                }
            }
        }        return true;
    }
</script>