17

イベントをキャッチして、貼り付けられたcontentEditableコンテンツの書式設定を削除します。on('paste')次に、テキストエリアにフォーカスし、そこにコンテンツを貼り付けて、値をコピーします。hereからの答えはほとんどありません。問題は、私がこれを行うことができないということです:

$("#paste-output").text($("#area").val());

コンテンツ全体が貼り付けられたテキストに置き換えられるためです。そのため、キャレットの位置にコンテンツを貼り付ける必要があります。私はそれを行うスクリプトをまとめました：

pasteHtmlAtCaret($("#area").val());

// pastes CTRL+V content at caret position
function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);

      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

html唯一の問題は、変数を使用してキャレット位置に HTML コンテンツを貼り付けることです。それをプレーンテキストに変換するにはどうすればよいですか? jQuery.text(html)を変数に追加しようとしましたが、うまくいきませんでした。このようなものが役立つかもしれません：

el.textContent||el.innerText;

アイデアやより良い解決策はありますか？ありがとう！

編集: 以下の回答のおかげで、コードを変更して問題を解決しました。私は基本的に の値textareaを aにコピーし、divその のみを取得しました.text():

// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});
4

4 に答える 4

10
  1. 外部divを作成し、
  2. そのdivにhtmlを入れて、
  3. そのdivからテキストをコピーします
  4. カーソルの位置に挿入します。
于 2013-02-28T00:29:27.567 に答える
3

Jonathan Hobbs からのリクエストに応じて、これを回答として投稿しています。上記の回答のおかげで、コードを修正して問題を解決しました。基本的に、textarea の値を div にコピーし、その .text() のみを取得しました。

// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
  setTimeout(function(){
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});
于 2013-06-28T18:52:01.890 に答える