我正在使用多个剑道编辑器,这些编辑器在一堆文本区域的循环中初始化。
<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/
在循环中使用闭包时,这是一个常见问题。编辑器变量是活动的,并保持设置为最后一个编辑器。因此问题就来了。要修复它,您需要使用另一个闭包。
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/