Tengo un div configurado encontentEditable y diseñado con "white-space:pre"así que mantiene cosas como saltos de línea. En Safari, FF e IE, el div se ve y funciona igual. Todo está bien. Lo que quiero hacer es extraer el texto de este div, pero de tal manera que no perder el formato, específicamente, los saltos de línea.

Estamos usando jQuery, cuyotext() La función básicamente hace un DFS de pre-pedido y pega todo el contenido en esa rama del DOM en un solo bulto. Esto pierde el formato.

Eché un vistazo a lahtml() función, pero parece que los tres navegadores hacen cosas diferentes con el HTML real que se genera detrás de escena en micontentEditable div. 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 cuerdo! (Etiqueta P mayúscula y todo)

El div tendrá un estilo establecido dinámicamente (fuente, color, tamaño y alineación) que se realiza mediante CSS, por lo que no estoy seguro de si puedo usar unpre etiqueta (que se mencionó en algunas páginas que encontré usando Google).

¿Alguien sabe de algún código JavaScript y / o complemento de jQuery o algo que extraiga texto de un contenido ContentEditable de tal manera que conserve los saltos de línea? Prefiero no reinventar una rueda de análisis si no tengo que hacerlo.

Actualización: puse elgetText funcionó desde jQuery 1.4.2 y lo modificó para extraerlo con espacios en blanco casi intactos (solo cambié 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;
}

Llamo a esta función y uso su salida para asignarla a un nodo XML con jQuery, algo así como:

var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);

El XML resultante finalmente se envía a un servidor a través de una llamada AJAX.

Esto funciona bien en Safari y Firefox.

En IE, solo el primer '\ n' parece ser retenido de alguna manera. Mirándolo más, parece que jQuery está configurando el texto así (línea 4004 de jQuery-1.4.2.js):

return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

Leyendo sobrecreateTextNode, parece que la implementación de IE puede combinar el espacio en blanco. ¿Es esto cierto o estoy haciendo algo mal?