javascript - Convertir HTML a texto plano en contenido editable

title html javascript

Question

Tengo un contentEditable y contentEditable el formato del contenido pegado on(''paste'') capturando el evento. Luego enfoco un área de texto, pego el contenido allí y copio el valor. Bastante la respuesta desde here . El problema es que no puedo hacer esto:

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

porque eso reemplazaría todo mi contenido con el texto pegado. Así que necesito pegar el contenido en la posición caret. Junté un guión que hace eso:

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

El único problema es que pega contenido HTML, en la posición de caret utilizando la variable html . ¿Cómo puedo transformar eso en texto plano? Intenté agregar el jQuery .text(html) a la variable sin suerte. Algo como esto podría ayudar:

el.textContent||el.innerText;

¿Alguna idea o una mejor solución? ¡Gracias!

EDITAR: Gracias a las respuestas a continuación, modifiqué mi código y resolví el problema. Básicamente copié el valor de textarea en un div y agarré solo su .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);
});

Answer 1

1. Crear un div externo,
2. Pon tu html en ese div,
3. Copia el texto de ese div
4. Insértelo en la posición del cursor.

Answer 2

A petición de Jonathan Hobbs, estoy publicando esto como la respuesta. Gracias a las respuestas anteriores modifiqué mi código y resolví el problema. Básicamente copié el valor de textarea en un div y agarré solo su .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);
});

Answer 3

La solución que utilicé es establecer el texto interior del elemento en desenfoque:

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

Esto mantiene el espacio en blanco, pero elimina el formato. Puede funcionar aceptable en su escenario también.

Answer 4

Reemplazar la solución de la etiqueta:

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