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