Fabric JS 2.4.1 Проблема с использованием примера копирования / вставки, объект (ы) застревает в буфере обмена - PullRequest
Новая
       11

Fabric JS 2.4.1 Проблема с использованием примера копирования / вставки, объект (ы) застревает в буфере обмена

0 голосов
/ 11 октября 2018

Ссылка на пример кода копирования / вставки: http://fabricjs.com/copypaste

У меня возникла проблема, когда я копирую текстовое поле в буфер обмена и вставляю клон на холст, а затем пытаюсь заменить текст либооригинал или скопированное текстовое поле с текстом, скопированным в буфер обмена из блокнота, он вставляет другое текстовое поле вместо текста из блокнота.

Я думаю, что мне нужна ткань JS, эквивалентная: 

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

Iпопробовал Edge, Chrome, Firefox и Opera и получил те же результаты.

Вот ссылка на скрипку

Шаги для воссоздания проблемы:

  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>
...