Fabric JS 2.4.1使用复制/粘贴示例时出现问题，对象卡在剪贴板中

Question

链接到示例复制/粘贴代码：http://fabricjs.com/copypaste

我在将文本框复制到剪贴板并将克隆粘贴到画布上，然后尝试用从记事本复制到剪贴板的文本替换原始文本框或复制的文本框时遇到问题，而是粘贴了另一个文本框记事本中的文本。

我想我需要等效于以下构造的js：

if(typeof(window.clipboardData)=="text") {
  alert("this is text")
}
else {
  alert("this is an object")
} 

我尝试了Edge，Chrome，Firefox和Opera，并获得了相同的结果。

这里是fiddle的链接

重新创建问题的步骤：

1. 复制文本框。
2. 运行记事本并输入一些文本“替换文本”，然后将文本复制到Windows剪贴板。
3. 选择原始文本框或无关紧要的副本并粘贴从记事本复制的文本

结果是它粘贴了一个新的文本框，而不是该文本框中的所选文本

如果重新运行此示例，而仅使用现有文本框，它将成功从记事本中粘贴文本。

var canvas = new fabric.Canvas('canvas', {
  selection: true,
});

textBox = new fabric.Textbox("copy me", {
  fontSize: 24,
  fontFamily: 'Verdana',
  fill: '#000000',
  textAlign: 'left',
  width: 200, // for 20 characters
  top: 0,
  left: 0
});
textBox.setControlsVisibility({
  mt: false, // middle top disable
  mb: false, // midle bottom
  ml: true, // middle left
  mr: true, // middle right
  tl: false, // top left
  tr: false, // top right
  bl: false, // bottom left
  br: false // bottom right
});
canvas.add(textBox);
canvas.renderAll();
var _clipboard = null;

function Copy() {
  // clone what are you copying since you
  // may want copy and paste on different moment.
  // and you do not want the changes happened
  // later to reflect on the copy.
  if (canvas.getActiveObject()) {
    canvas.getActiveObject().clone(function(cloned) {
      _clipboard = cloned;
    });
  }
}

function Paste() {
  // clone again, so you can do multiple copies.
  if (_clipboard == null) {
    return false;
  }
  _clipboard.clone(function(clonedObj) {
    clonedObj.set({
      left: clonedObj.left + 20,
      top: clonedObj.top + 20,
      evented: true,
    });
    if (clonedObj.type === 'activeSelection') {
      // active selection needs a reference to the canvas.
      clonedObj.canvas = canvas;
      clonedObj.forEachObject(function(obj) {
        canvas.add(obj);
      });
      // this should solve the unselectability
      clonedObj.setCoords();
    } else {
      canvas.add(clonedObj);
    }
    _clipboard.top += 20;
    _clipboard.left += 20;
    canvas.setActiveObject(clonedObj);
    canvas.requestRenderAll();
  });
}

$(document).keydown(function(e) {
  console.log(e.which);
  if (e.which === 89 && e.ctrlKey) {
    // control + y
    //replay(redo, undo, '#undo', this);
  } else if (e.which === 90 && e.ctrlKey) {
    // control + z
    //replay(undo, redo, '#redo', this);
  } else if (e.which === 67 && e.ctrlKey) {
    // control + c
    Copy();
  } else if (e.which === 86 && e.ctrlKey) {
    // control + v
    Paste();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" class="context-menu-one" width="864" height="450" style="border:2px solid black"></canvas>
<h1>
  Use ctrl-c and ctrl-v to copy and paste
</h1>

<ol>
  <li>Copy the textbox</li>
  <li>Run Notepad and type in some text "replacement text", then copy the text to the windows clipboard</li>
  <li>Select either the original textbox or the copy it doesn't matter which and paste in the text copied from notepad</li>
  <li>The result is that it pastes a new textbox instead of the selected text in the textbox</li>
</ol>
<h3>
If you re-run this example and just use the existing textbox it will successfully paste the text from notepad.
</h3>

Answer 1

粘贴Larry Robertson在评论中给出的解决方案，以防jsfiddle将其删除。

var canvas = new fabric.Canvas('canvas', {
  selection: true,
});

textBox = new fabric.Textbox("copy me", {
  fontSize: 24,
  fontFamily: 'Verdana',
  fill: '#000000',
  textAlign: 'left',
  width: 200, // for 20 characters
  top: 0,
  left: 0
});
textBox.setControlsVisibility({
  mt: false, // middle top disable
  mb: false, // midle bottom
  ml: true, // middle left
  mr: true, // middle right
  tl: false, // top left
  tr: false, // top right
  bl: false, // bottom left
  br: false // bottom right
});
canvas.add(textBox);
canvas.renderAll();




var _clipboard = null;

function Copy() {
  // clone what are you copying since you
  // may want copy and paste on different moment.
  // and you do not want the changes happened
  // later to reflect on the copy.
  if (canvas.getActiveObject()) {
    if (canvas.getActiveObject().isEditing == true) {
      return false;
    }
    canvas.getActiveObject().clone(function(cloned) {
      _clipboard = cloned;
    });
  }
}

function Paste() {
  // clone again, so you can do multiple copies.
  if (_clipboard == null) {
    return false;
  }
  if (canvas.getActiveObject().isEditing == true) {
    return false;
  }
  _clipboard.clone(function(clonedObj) {
    clonedObj.set({
      left: clonedObj.left + 20,
      top: clonedObj.top + 20,
      evented: true,
    });
    if (clonedObj.type === 'activeSelection') {
      // active selection needs a reference to the canvas.
      clonedObj.canvas = canvas;
      clonedObj.forEachObject(function(obj) {
        canvas.add(obj);
      });
      // this should solve the unselectability
      clonedObj.setCoords();
    } else {
      canvas.add(clonedObj);
    }
    _clipboard.top += 20;
    _clipboard.left += 20;
    //canvas.setActiveObject(clonedObj);
    // canvas.requestRenderAll();
    _clipboard == null
  });
}










$(document).keydown(function(e) {
  if (e.which === 89 && e.ctrlKey) {
    // control + y
    //replay(redo, undo, '#undo', this);
  } else if (e.which === 90 && e.ctrlKey) {
    // control + z
    //replay(undo, redo, '#redo', this);
  } else if (e.which === 67 && e.ctrlKey) {
    // control + c
    Copy();
  } else if (e.which === 86 && e.ctrlKey) {
    // control + v
    Paste();
  }
});

var canvas = new fabric.Canvas('canvas', {
	  selection: true,
	});

	textBox = new fabric.Textbox("copy me", {
	  fontSize: 24,
	  fontFamily: 'Verdana',
	  fill: '#000000',
	  textAlign: 'left',
	  width: 200, // for 20 characters
	  top: 0,
	  left: 0
	});
	textBox.setControlsVisibility({
	  mt: false, // middle top disable
	  mb: false, // midle bottom
	  ml: true, // middle left
	  mr: true, // middle right
	  tl: false, // top left
	  tr: false, // top right
	  bl: false, // bottom left
	  br: false // bottom right
	});
	canvas.add(textBox);
	canvas.renderAll();




	var _clipboard = null;

	function Copy() {
	  // clone what are you copying since you
	  // may want copy and paste on different moment.
	  // and you do not want the changes happened
	  // later to reflect on the copy.
	  if (canvas.getActiveObject()) {
	    if (canvas.getActiveObject().isEditing == true) {
	      return false;
	    }
	    canvas.getActiveObject().clone(function(cloned) {
	      _clipboard = cloned;
	    });
	  }
	}

	function Paste() {
	  // clone again, so you can do multiple copies.
	  if (_clipboard == null) {
	    return false;
	  }
	  if (canvas.getActiveObject().isEditing == true) {
	    return false;
	  }
	  _clipboard.clone(function(clonedObj) {
	    clonedObj.set({
	      left: clonedObj.left + 20,
	      top: clonedObj.top + 20,
	      evented: true,
	    });
	    if (clonedObj.type === 'activeSelection') {
	      // active selection needs a reference to the canvas.
	      clonedObj.canvas = canvas;
	      clonedObj.forEachObject(function(obj) {
	        canvas.add(obj);
	      });
	      // this should solve the unselectability
	      clonedObj.setCoords();
	    } else {
	      canvas.add(clonedObj);
	    }
	    _clipboard.top += 20;
	    _clipboard.left += 20;
	    //canvas.setActiveObject(clonedObj);
	    // canvas.requestRenderAll();
	    _clipboard == null
	  });
	}


	$(document).keydown(function(e) {	  
	  if (e.which === 89 && e.ctrlKey) {
	    // control + y
	    //replay(redo, undo, '#undo', this);
	  } else if (e.which === 90 && e.ctrlKey) {
	    // control + z
	    //replay(undo, redo, '#redo', this);
	  } else if (e.which === 67 && e.ctrlKey) {
	    // control + c
	    Copy();
	  } else if (e.which === 86 && e.ctrlKey) {
	    // control + v
	    Paste();
	  }
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stealth-apsvaw.streamhoster.com/fabric.js-2.4.1/dist/fabric.min.js"></script>
<canvas id="canvas" class="context-menu-one" width="864" height="450" style="border:2px solid black"></canvas>
<h1>
  Use ctrl-c and ctrl-v to copy and paste
</h1>

<ol>
  <li>Copy the textbox</li>
  <li>Run Notepad and type in some text "replacement text", then copy the text to the windows clipboard</li>
  <li>Select either the original textbox or the copy it doesn't matter which and paste in the text copied from notepad</li>
  <li>The result is that it pastes a new textbox instead of the selected text in the textbox</li>
</ol>
<h3>
  If you re-run this example and just use the existing textbox it will successfully paste the text from notepad.
</h3>