链接到示例复制/粘贴代码：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
的链接重新创建问题的步骤：
结果是它粘贴了一个新的文本框，而不是该文本框中的所选文本
如果重新运行此示例并仅使用现有文本框，它将成功从记事本粘贴文本。
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>
答案 0 :(得分：0)
粘贴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();
}
});<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>