[Résolu] Inline editing + <br />

Bonjour,
J'ai créé une petite fonction d'edit inline, qui fonctionnait très bien jusqu'à se que je m'aperçoive que les retour à la ligne ne fonctionnait pas du tout.

Mon code est hyper simple :

HTML:

<p id="textNews" ondblclick="javascript:inlineEdit('textNews');">Nam,<br /> tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet.<br /> Curabitur neque mauris, porta vel, lacinia quis, placerat
</p>

function inlineEdit (idFR)
{
if (editingInProgress == '
{
editingInProgress++;
var textFR	= document.getElementById(idFR).innerHTML.trim();
document.getElementById(idFR).innerHTML = '<textarea id="'+idTextAreaFR+'">'+textFR+'</textarea>

Quand je double clic sur mon paragraphe à editer, j'appelle la fonction "inlineEdit()", dans celle-ci je récupère le texte et je l'affiche dans un textarea. FACILE.

Mais si j'ai des <br />, ils ne sont pas traité javascript, enfin je pige pas trop se qu'il se passe. en faite si dans mon code HTML j'écris du texte en mettant des retour chariot normaux, touche entrer, il sont affiché par javascript, dans le textarea mais pas quand je n'édite pas.

Si je mets des <br /> dans mon code, ils sont correctement interprétés par HTML mais quand j'édit la fonction js m'affiche <br> dans le textarea. Même pas <br />..

Si quelqu'un à déja un peu galéré avec les retour chariot en js je veux bien une bonne dose de connaissance.

PS : Désolé pour la taille du message.
PPS : Je peux montrer du code.
Modifié par bentsen (08 Aug 2009 - 00:46)

Hello,

je dirais que le problème n'est pas lié directement aux retours chariot mais au fait qu'il faut échapper les / en \/.

Je pense que les "/" sautent en récupérant le code innerHTML. Et qu'il faut faire l'équivalent d'un nl2br mais inverse. Soit quelque chose comme :

myTextarea.value = myTextarea.value.replace(/<br[^>]+>/g, "\n");

Avec énormément d'espoir j'ai rafraichi ma page dans firefox, et j'ai double cliqué.{suspense}...

Et sa marche, mais que si j'associe les réponses de Ze Nenex et Heyoan. Si je ne met que :

myTextarea.value = myTextarea.value.replace(/<br[^>]+>/g, "\n");

sa m'affiche dans le textarea : <br \="">, et si je ne met : <br \/> sa ne fait rien.

Donc, je prie pour que, se ne soit pas mon état mentale actuel qui me fasse voir n'importe quoi, mais sa à l'air de fonctionner.

Merci pour vos réponses.
Modifié par bentsen (08 Aug 2009 - 00:45)

Salut

C'est cool. Par contre tu n'as pas à échapper quoi que ce soit. Le fait de récupérer le code contenu dans le textarea par innerHTML est une erreur en soit. textarea est un élément de formulaire et comporte une propriété value dédiée à cet effet. En outre, innerHTML est du code parsé par ton navigateur et dépend donc de celui-ci. Un même code assigné peut ressortir différemment (avec ou sans "/" par exemple, les double quote sautent, ...) suivant le navigateur.

Tout ce que tu as à faire est de remplacer les <br />, <br> ou encore<BR> par des \n (newline) via la propriété value, tel que je te l'ai indiqué, et rien de plus.

D'ailleurs, la regexp serait plutôt /<br[^>]*>/ig

@ une prochaine

Salut,

Je ne récupère pas le contenu du textearea avec innerHTML mais bien avec value.
le innerHTML ne me sert qu'a mettre le textarea dans un div qui contient normalement mon texte normal.

D'ailleurs il y a quelques petites choses dans ton code qui ne vont pas. Tu assignes l'id du paragraphe à ton textarea et tu mets ce dernier dans le paragraphe. Résultat, doublette de l'id. De plus, tu peux très bien faire inlineEdit(this) plutôt qu'inlineEdit("monId") puisque le contexte d'exécution d'ondblclick est l'élément lui-même. Ce qui m'amène à te dire qu'il vaudrait mieux séparer le comportement javascript de ton code HTML via la sélection par ID :

<p id="test" class="inlineedit-textarea">...

var p = document.getElementById("test");

// Si tu n'as pas de gestionnaire d'évènement
p.ondblclick = function(e) {
    inlineEdit(e, this);
};

function inlineEdit(e, el) {
	// Dans le cas où el devient un textarea
	if(el.className.indexOf("inlineedit-textarea") > -1) {
		var t = document.createElement("textarea");
		t.value = el.innerHTML.replace(/<br[^>]*>/ig, "\n");
		t.id = el.id;
		el.parentNode.replaceChild(t, el);
	}
}