Extrahieren von Text aus einem contentEditable div

Ich habe ein Div auf @ gesetcontentEditable und gestylt mit "white-space:pre ", so dass es Dinge wie Zeilenumbrüche enthält. In Safari, FF und IE sieht das div ziemlich gleich aus und funktioniert auch so. Alles ist in Ordnung. Ich möchte den Text aus diesem div extrahieren, aber auf eine solche Weise, dass dies der Fall ist nicht die Formatierung verlieren - insbesondere die Zeilenumbrüche.

Wir verwenden jQuery, dessentext()ie @ -Funktion führt im Grunde genommen eine Vorbestellungs-DFS durch und fügt den gesamten Inhalt in diesem Zweig des DOM zu einem einzigen Knoten zusammen. Dadurch geht die Formatierung verloren.

Ich habe mir das @ angeschahtml() -Funktion, aber es scheint, dass alle drei Browser unterschiedliche Dinge mit dem tatsächlichen HTML-Code tun, der hinter den Kulissen in meinem @ generiert wircontentEditable div. Angenommen, ich tippe dies in mein div:

1
2
3

Dies sind die Ergebnisse:

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>

Pfui. Nichts sehr konsequentes hier. Das Überraschende ist, dass MSIE am vernünftigsten aussieht! (Großgeschriebenes P-Tag und alle)

Der div hat dynamisch festgelegte Stile (Schriftart, Farbe, Größe und Ausrichtung), die mit CSS erstellt werden. Daher bin ich mir nicht sicher, ob ich ein @ verwenden kanpre tag (das auf einigen Seiten erwähnt wurde, die ich mit Google gefunden habe).

Kennt jemand einen JavaScript-Code und / oder ein jQuery-Plugin oder etwas, das Text aus einem contentEditable div so extrahiert, dass Zeilenumbrüche erhalten bleiben? Ich würde es vorziehen, ein Parsing-Rad nicht neu zu erfinden, wenn ich nicht muss.

Update: Ich habe dasgetText -Funktion aus jQuery 1.4.2 und modifizierte es, um es mit größtenteils intakten Leerzeichen zu extrahieren (ich habe nur eine Zeile geändert, in der ich eine neue Zeile hinzufüge);

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

Ich rufe diese Funktion auf und verwende ihre Ausgabe, um sie mit jQuery einem XML-Knoten zuzuweisen. Beispiel:

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

Das resultierende XML wird schließlich über einen AJAX-Aufruf an einen Server gesendet.

Dies funktioniert gut in Safari und Firefox.

Auf IE scheint nur das erste '\ n' irgendwie beibehalten zu werden. Bei näherer Betrachtung sieht es so aus, als würde jQuery den Text so einstellen (Zeile 4004 von jQuery-1.4.2.js):

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

Reading up oncreateTextNode, es scheint, dass die IE-Implementierung den Whitespace mischen kann. Ist das wahr oder mache ich etwas falsch?