web-dev-qa-db-ja.com

contentEditable divからフォーマットを削除する

ContentEditable Divがあり、特にテキストのコピーと貼り付けのためにフォーマットを削除したい。

javascriptjqueryhtmlformattingcontenteditable
26
Garth Humphreys

InnerTextを使用してみましたか？

追加：

編集可能なdivに貼り付けられたコンテンツからマークアップを削除する場合は、一時的なdivを作成するという古いハックを試してください。以下の例を参照してください。

<!DOCTYPE html>
<html>

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Strip editable div markup</title>

  <script type="text/javascript">
    function strip(html) {
      var tempDiv = document.createElement("DIV");
      tempDiv.innerHTML = html;
      return tempDiv.innerText;
    }
  </script>
</head>

<body>
  <div id="editableDiv" contentEditable="true"></div>
  <input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" />
</body>

</html>
25
Sam Dutton
document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    });

それは簡単です。「貼り付け」イベントにリスナーを追加し、クリップボードの内容を再フォーマットします。

本文のすべてのコンテナの別の例を次に示します。

[].forEach.call(document.querySelectorAll('div[contenteditable="true"]'), function (el) {
    el.addEventListener('paste', function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    }, false);
});

サリュード。

32
Isaac Limón

長い間これに対する答えを探していて、自分で書いてしまいました。

これが他の人の役に立つことを願っています。これを書いている時点では、ie9、latest chromeおよびfirefoxで動作するようです。

<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />

<script type="text/javascript">

    var _onPaste_StripFormatting_IEPaste = false;

    function OnPaste_StripFormatting(elem, e) {

        if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
            e.preventDefault();
            var text = e.originalEvent.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (e.clipboardData && e.clipboardData.getData) {
            e.preventDefault();
            var text = e.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (window.clipboardData && window.clipboardData.getData) {
            // Stop stack overflow
            if (!_onPaste_StripFormatting_IEPaste) {
                _onPaste_StripFormatting_IEPaste = true;
                e.preventDefault();
                window.document.execCommand('ms-pasteTextOnly', false);
            }
            _onPaste_StripFormatting_IEPaste = false;
        }

    }

</script>
5
Daniel - SDS Group

久しぶりですが、同じ問題がありました。私の場合、それをさらに悪化させるのはGWTアプリケーションです。とにかく、次の問題を解決しました：

var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);

参照： https://jsfiddle.net/erikwoods/Ee3yC/

「insertHTML」の代わりに「inserttext」コマンドを選択しました。これは、ドキュメントにはプレーンテキストを挿入することが正確に記載されているため、より適切であるように思われるためです。 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand を参照してください

3
Robson Hermes

Jqueryでは 。text（） メソッドを使用できるので、たとえばぼかしの際にコンテンツをテキストコンテンツに置き換えることができます

$("#element").blur(function(e) {
    $(this).html($(this).text());
});
2
Justo

<div id="editableDiv" contentEditable="plaintext-only"></div>をお試しください

0
Matthias Hagemann

この問題に私の解決策を追加したいと思います。

ContentEditableElement.addEventListener('input', function(ev) {
  if(ev.target.innerHTML != ev.target.textContent) {

    // determine position of the text caret
    var caretPos = 0,
      sel, range;
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      var children = ev.target.childNodes;
      var keepLooping = true;
      for(let i = 0; keepLooping; i++) {
        if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
          caretPos += range.endOffset;
          keepLooping = false;
        } else {
          caretPos += children[i].textContent.length;
        }
      }

      // set the element's innerHTML to its textContent
      ev.target.innerHTML = ev.target.textContent;

      // put the caret where it was before
      range = document.createRange();
      range.setStart(ev.target.childNodes[0], caretPos);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
});

（これはIEの古いバージョンと互換性がありません）

0
Airhogs777

システムのクリップボードにアクセスできないため、ハックが必要になります。この質問を参照してください： JavaScript貼り付けイベントでクリップボードデータを取得（クロスブラウザー）

0
Tim Down