web-dev-qa-db-fra.com

Supprimer la mise en forme d'un contenu contentEditable

J'ai un contenu contentEditable et je veux supprimer toute mise en forme en particulier pour copier et coller du texte.

javascriptjqueryhtmlformattingcontenteditable
21
Garth Humphreys

Avez-vous essayé d'utiliser innerText?

AJOUTÉE:

Si vous souhaitez supprimer le balisage du contenu collé dans le div éditable, essayez le vieux bidouillage de création d'un div temporaire - voir l'exemple ci-dessous.

<!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>
22
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);
    });

C'est simple: ajoutez un écouteur à l'événement "coller" et reformatez le contenu du presse-papier. 

Voici un autre exemple pour tous les conteneurs du corps:

[].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);
});

Saludos. 

27
Isaac Limón

Je cherchais une réponse à cette question depuis une éternité et j'ai fini par écrire le mien.

J'espère que cela aide les autres. Au moment de la rédaction de cet article, il semble fonctionner dans ie9, chrome et 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

Je sais que ça fait longtemps, mais j'ai eu le même problème. Dans mon cas, c'est une application GWT pour aggraver encore les choses. Quoi qu'il en soit, résolu le problème avec:

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

Voir: https://jsfiddle.net/erikwoods/Ee3yC/

Je préférais la commande "inserttext" au lieu de "insertHTML", car la documentation indique que c'est exactement pour insérer du texte brut, cela semble donc plus approprié. Voir https://developer.mozilla.org/en-US/ docs/Web/API/Document/execCommand

2
Robson Hermes

Avec Jquery, vous pouvez utiliser .text () method, ainsi, lorsque flou par exemple, vous pouvez remplacer le contenu par le contenu texte

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

J'aimerais ajouter ma solution à ce problème:

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);
    }
  }
});

(ce n'est pas compatible avec les anciennes versions d'IE)

0
Airhogs777

Vous ne pouvez pas accéder au presse-papiers du système, vous aurez donc besoin d'un hack. Voir cette question: JavaScript Obtenir les données du presse-papiers sur l’événement de collage (Cross browser)

0
Tim Down