Convertir HTML en texte brut dans contentEditable

J'ai un contentEditable et je bande la mise en forme de contenu collé on('paste') par la capture de l'événement. Alors je me concentre un textarea, collez le contenu dans y, et copier la valeur. À peu près la réponse de ici. Le problème est que je ne peux pas faire ça:

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

parce que ce serait de remplacer la totalité de mon contenu avec le texte collé. J'ai donc besoin de coller le contenu à la position du curseur. J'ai mis en place un script qui fait:

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

Le seul problème, c'est qu'il colle le contenu HTML, à la position du curseur à l'aide de la html variable. Comment puis-je transformer en texte brut? J'ai essayé d'ajouter le jQuery .text(html) de variable, mais sans succès. Quelque chose comme ce qui pourrait aider:

el.textContent||el.innerText;

Des idées ou une meilleure solution? Merci!

EDIT:
Merci pour les réponses ci-dessous j'ai modifié mon code et le problème est réglé. En gros, j'ai copié la valeur de textarea dans un div et attrapa seulement son .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);
});

Pourriez-vous svp poster votre solution (à partir de la modifier au bas de votre post) comme réponse? est une réponse et la solution, si elle rend plus facile pour les lecteurs plus j'ai l'intention de upvote.
fait.
Cette solution de travail si vous avez une gamme sélectionnée? AKA pas juste en l'insérant à la fois lieu, mais au lieu de le remplacer à la région sélectionnée?

OriginalL'auteur Alex | 2013-02-28

10
1. Créer un div,
2. Mettre votre code html dans cette div,
3. Copier le texte de la div
4. L'insérer à la position du curseur.
C'est correct. À l'aide de jquery: $('<div>').html(htmlSnippet).text()
Merci, les gars. Modifié mon code et résolu le problème.
C'est bizarre. pourquoi voudriez-vous faire lorsque vous pouvez utiliser la même contenteditable div juste faire de même et de re-remplir avec le aseptisé contenu? et en tout cas, le unsanitized contenu flash pour un bref instant.
Salut, est-ce à conserver les sauts de ligne pour vous?

OriginalL'auteur Shehabic
3

À la demande de Jonathan Hobbs je vous poste ça comme réponse.
Merci pour les réponses ci-dessus j'ai modifié mon code et le problème est réglé. En gros, j'ai copié la valeur du textarea dans un div et attrapa seulement son .texte():
```
//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);
});
```
votre exemple de code a été copié et collé correctement, il semblerait. Il y a un besoin pour un setTimeout de laisser le contenu pour être réellement dans cette div (c'est stupide mais c'est vrai) et dans votre code, nous pouvons voir qu'il ya un 20 mais le délai d'attente n'est pas inclus, à cet effet, ce code provoque les erreurs, jusqu'à ce que fixe.
J'ai édité que dans le stackoverflow.com/review/suggested-edits/15338834

OriginalL'auteur Alex

Remplacer la balise solution:

http://jsfiddle.net/tomwan/cbp1u2cx/1/

var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");

$plainText.on('paste', function (e) {
    window.setTimeout(function () {
        $plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
    }, 0);
});

$linkOnly.on('paste', function (e) {
    window.setTimeout(function () {
        $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
    }, 0);
});

function replaceStyleAttr (str) {
    return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
        return b + 'style_replace' + d;
    });
}

function removeTagsExcludeA (str) {
    return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}

function removeAllTags (str) {
    return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}

OriginalL'auteur TomWan

1

La solution que j'ai utilisé est de fixer le innerText de l'élément sur le flou:

$element.on('blur', () => this.innerText = this.innerText);

Ce qui maintient l'espace, mais supprime la mise en forme. Il peut travailler acceptable dans votre scénario.

OriginalL'auteur Sebazzz

Vous devez vous connecter pour publier un commentaire.