提问者:小点点

多剑道编辑器在Chrome上粘贴屏幕截图


我正在使用多个剑道编辑器,这些编辑器在一堆文本区域的循环中初始化。

<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);
            }
        }
    });
}

屏幕截图和粘贴在firefox中正常工作。

问题:-在chrome中,当我粘贴一个屏幕截图到文本pad1(任何比文本pad4)然后它被粘贴到文本pad4.

这可能是因为textpad4编辑器终于初始化了,但在firefox中仍然可以正常工作。那么如何在chrome中修复它呢?

小提琴:http://jsfiddle.net/ruchan/6dHgV/3/


共1个答案

匿名用户

在循环中使用闭包时,这是一个常见问题。编辑器变量是活动的,并保持设置为最后一个编辑器。因此问题就来了。要修复它,您需要使用另一个闭包。

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

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

以下是更新的JSFIDLE:http://jsfiddle.net/6dHgV/5/