Multiple Kendo editor paste Screen Capture on Chrome

Question

I am using multiple kendo editors which are initialized in a loop for a bunch of textareas.

<div><textarea id="textpad1"></textarea></div>
<div><textarea id="textpad2"></textarea></div>
<div><textarea id="textpad3"></textarea></div>
<div><textarea id="textpad4"></textarea></div>

JS

for(var i =1; i<=4; i++)
{
    var editoritem="#textpad"+i;
    $(editoritem).kendoEditor();

    //RPS: Paste Image In Editor
    var editor = $(editoritem).data("kendoEditor");
    $(editor.document).on("paste", function (e) {
        var clipboard = e.originalEvent.clipboardData;

        if (clipboard && clipboard.items) {
            var screenshot = clipboard.items[0];

            if (screenshot.kind == "file") {
                var blob = screenshot.getAsFile();

                var reader = new FileReader();

                reader.onload = function (event) {
                    var html = kendo.format('<img src="{0}"/>', event.target.result);

                    editor.paste(html);
                };
                reader.readAsDataURL(blob);
            }
        }
    });
}

The screen capture and paste is working in firefox correctly.

The problem: - In chrome, when i paste a screen capture to the textpad1(anyother than textpad4) then it is pasted to textpad4. the screencapture pastes are only being shown in the textpad4.

this might be happening because the textpad4 editor is initialized at last, but still in firefox its working fine. So how do i fix it in chrome?

Fiddle: http://jsfiddle.net/ruchan/6dHgV/3/

Answer 1

This is a common issue when using closures in a loop. The editor variable is live and remains set to the last editor. Hence the problem. To fix it you need to use another closure.

for(var i =1; i<=4; i++)
{
    var editoritem="#textpad"+i;
    $(editoritem).kendoEditor();

    (function(editor) {
        // paste logic
    })($(editoritem).data("kendoEditor"));
}

Here is the updated jsfiddle: http://jsfiddle.net/6dHgV/5/