0

書式設定されたコンテンツ (太字/斜体のテキストを含む段落など) を持つ 2 つの contenteditable div があり、選択したテキストを一方から他方に移動したいと考えています。それはネイティブにうまく機能しますが、移動したテキストがドロップされたときに「クリーン」にしたい、たとえば、書式を削除します（「<b>hello</b>」は「hello」になります）。そこで、HTML5 ドロップ イベントを次のように使用することにしました。

  dropHandler = function(e) {
    text = e.dataTransfer.getData('text');

    if (document.caretRangeFromPoint)
    {
      range = document.caretRangeFromPoint(e.clientX, e.clientY);
    }
    else if (document.createRange && oe.rangeParent)
    {
      range = document.createRange();
      range.setStart(oe.rangeParent, oe.rangeOffset);
    }

    range.insertNode(document.createTextNode(text));

    return false;
  };

それは機能し、「クリーンな」(プレーン) テキストを正しい位置に配置しますが、ソース contenteditable div で最初に選択されたテキストは削除されません。テキストコピー。ドロップされたテキストを前処理しながら、デフォルトのテキスト移動動作を実現するにはどうすればよいですか?

4

1 に答える 1

0

Selection APIを使用します (サポートされていない IE <= 8 を除く):

dropHandler = function(e) {
  text = e.dataTransfer.getData('text');

  if (document.caretRangeFromPoint)
  {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
  }
  else if (document.createRange && oe.rangeParent)
  {
    range = document.createRange();
    range.setStart(oe.rangeParent, oe.rangeOffset);
  }

  // Keep a reference to the text node so we can select it later
  var textNode = document.createTextNode(text);
  range.insertNode(textNode);

  var sel = window.getSelection();
  sel.deleteFromDocument();
  range.selectNodeContents(textNode);
  sel.removeAllRanges();
  sel.addRange(range);

  return false;
};
于 2013-04-05T08:29:32.847 に答える