Tengo un div establecido en contentEditable y con el estilo "white-space:pre", por lo que guarda cosas como saltos de línea. En Safari, FF e IE, el div se ve bastante y funciona de la misma manera. Todo está bien. Lo que quiero hacer es extraer el texto de este div, pero de tal manera que no pierda el formato, específicamente, la línea se rompe.Extrayendo texto de un contentEditable div
Estamos utilizando jQuery, cuya función text() básicamente hace un pre-orden de DFS y pega todo el contenido en esa rama del DOM en un solo trozo. Esto pierde el formateo.
He echado un vistazo a la función html(), pero parece que los tres navegadores hacen cosas diferentes con el HTML real que se genera detrás de las escenas en mi div contentEditable. Suponiendo que escribo esto en mi div:
1
2
3
Estos son los resultados:
Safari 4:
1
<div>2</div>
<div>3</div>
Firefox 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
Ugh. Nada muy consistente aquí. ¡Lo sorprendente es que MSIE se ve más sensata! (Etiqueta P en mayúscula y todo)
El div tendrá un diseño dinámico de estilo (cara de fuente, color, tamaño y alineación) que se realiza mediante CSS, así que no estoy seguro si puedo usar una etiqueta pre (que era aludido en algunas páginas que encontré usando Google).
¿Alguien sabe de algún código JavaScript y/o jQuery plugin o algo que extraiga texto de un contentEditable div de tal manera que se preserve linebreaks? Preferiría no reinventar una rueda de análisis si no fuera necesario.
Actualización: Comprimí la función getText de jQuery 1.4.2 y la modifiqué para extraerla con espacios en blanco casi intactos (solo conecté una línea donde agregué una nueva línea);
function extractTextWithWhitespace(elems) {
var ret = "", elem;
for (var i = 0; elems[i]; i++) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if (elem.nodeType === 3 || elem.nodeType === 4) {
ret += elem.nodeValue + "\n";
// Traverse everything else, except comment nodes
} else if (elem.nodeType !== 8) {
ret += extractTextWithWhitespace2(elem.childNodes);
}
}
return ret;
}
me llaman a esta función y el uso de su salida para asignarlo a un nodo XML con jQuery, algo así como:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
El XML resultante es finalmente enviada a un servidor a través de una llamada AJAX.
Esto funciona bien en Safari y Firefox.
En IE, solo la primera '\ n' parece retenerse de alguna manera. Mirar en él más, parece que jQuery es establecer el texto como tal (línea 4004 de jQuery-1.4.2.js):
return this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(text));
Leyendo sobre createTextNode, parece que la aplicación de IE puede triturar hasta el espacio en blanco . ¿Es esto cierto o estoy haciendo algo mal?
Curiosamente, no es de extrañar que IE esté actuando de la manera más sensata: contentEditable fue originalmente propiedad de IE; ha estado en IE desde 5.5, así que supongo que han tenido más tiempo para hacerlo funcionar bien. – Yahel