J'ai un div ensemble d' contentEditable et de style avec "white-space:pre" de sorte qu'il garde les choses comme mais les sauts de ligne. Dans Safari, FF et IE, la div assez bien ressemble et fonctionne de la même façon. Tout est bien. Ce que je veux faire est d'extraire le texte de cette div, mais de telle manière à ne pas perdre la mise en forme-plus précisément, les sauts de ligne.
Nous sommes à l'aide de jQuery, dont l' text() fonction fait une pré-commande DFS et les colles ensemble le contenu de cette branche de la DOM en un seul morceau. Ce perd la mise en forme.
J'ai eu un coup d'oeil à l' html() de la fonction, mais il semble que tous les trois navigateurs à faire des choses différentes avec le HTML qui est généré derrière les scènes dans ma contentEditable div. En supposant que je tape ceci dans mon div:
1
2
3
Ce sont les résultats:
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. Rien de très cohérent ici. La chose surprenante est que MSIE semble le plus sain d'esprit! (En majuscule balise P et tout et tout)
La div devra définir dynamiquement le style (police de caractères, la couleur, la taille et l'alignement) qui est fait à l'aide de CSS, donc je ne sais pas si je peux utiliser un pre balise (qui a été évoqué sur certaines pages, j'ai trouvé à l'aide de Google).
Personne ne sait de tout code JavaScript et/ou jQuery plugin ou quelque chose qui va extraire du texte à partir d'un contentEditable div de façon à préserver mais les sauts de ligne? Je préfère ne pas réinventer une analyse de la roue si je n'ai pas d'.
Mise à jour: j'ai chipé l' getText fonction de jQuery 1.4.2 et modifié afin de l'extraire avec un espace en grande partie intact (je ne chnaged une ligne où je ajouter un saut de ligne);
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;
}
J'appelle cette fonction et l'utiliser à sa sortie de l'attribuer à un nœud XML avec jQuery, quelque chose comme:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
Le XML résultant est ensuite envoyé à un serveur via un appel AJAX.
Cela fonctionne bien dans Safari et Firefox.
Sur IE, seul le premier '\n' semble avoir conservé quelque sorte. La recherche en elle plus, il ressemble à jQuery est de définir le texte comme (ligne 4004 de jQuery-1.4.2.js):
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
À lire sur createTextNode, il semble que IE mise en œuvre peut mash up de l'espace. Est-ce vrai ou suis-je en train de faire quelque chose de mal?
