equivalent contentEditable

[calitom]

Bonjour,

J'aurai besoin de l'equivalent de contentEditable qui marche sous IE mais pour firefox.
Comment je peux faire pour rendre un div editable sous firefox?

Merci d'avance de votre aide parce que la je patauge!!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[Mori]

salut,
installe greasemonkey et/ou platypus http://extensions.geckozone.org/Firefox/

[calitom]

il n'y a pas d'autre moyen?

Je ne souahite pas que les utilisaturs doivent installer des add on pour que ca marche...

On ne peut pas contourner ce probleme?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[Mori]

salut,

il fallait indiquer que tu parlais de ton site ... au passage, donne-nous son adresse pour que certains s'y penchent. je déplace dans la bonne section.

[calimo]

Le contenu éditable se trouve dans les formulaires, en particulier <textarea>.

Le W3C ne définit pas ContentEditable, c'est du propriétaire Microsoft, forcément...

Cela dit il y a des demandes à ce sujet : https://bugzilla.mozilla.org/show_bug.cgi?id=237964

Mais quelle est l'utilisation ? Je dois avouer ne pas trop voir à quoi ça peut servir...

[calitom]

En fait je fais un editeur en ligne, et j'aurai besoin de pouvoir editer des div pour y ajouter du texte et/ou des images...

Grace a contentEditable de IE ca marche sous IE, mais je voudrais que ca marche aussi sous mon navigateur favori!!!

J'ai essayé une technique avec div et textarea:

Code : Tout sélectionner

function switchObj(div, textarea){
	if(div.style.display != "none"){
		div.style.display = "none";
		textarea.style.display = "block";
		textarea.value = div.innerHTML;
	}
	else{
		div.style.display = "block";
		textarea.style.display = "none";
		div.innerHTML = textarea.value;
	}
}

<div id="truc1" onclick="switchObj(this, document.getElementById('truc2'))">Texte</div>
<textarea id="truc2" style="display:none" onblur="switchObj(document.getElementById('truc1'), this)"></textarea>

La je peux editer du texte... Mais quand je veux mettre en forme du texte, ca ne marche pas, et idem si je veux ajouter une image au div...

Pour mieux comprendre, aller voir à l'adresse suivante, c'est ce que je suis en train de faire:
http://www.s190206913.onlinehome.fr/tes ... range.html

Tester avec IE et FIRFOX pour voir les différences...
Il faut cliquer sur ajouter un objet pour ajouter un div à la page...


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[calimo]

Un gros bordel ce truc, j'ai rien réussi à faire (avec IE), à part ajouter l'objet. Il m'a lancé je ne sais combien de fois le débogueur...

En gros, ce qu'il te faut c'est un truc du style Midas (en peut-être un peu plus complet), c'est bien ça ?

PS : pas besoin d'envoyer un mp, j'aurais retrouvé le message tout seul

[nico@nc]

Tu devrais pouvoir faire quelque chose avec ça :

Code : Tout sélectionner

document.designMode='on';

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[calitom]

Merci pour ta réponse, mais designMode ne me permet pas non plus de faire ce que je veux...

En fait, j'arrive à modifier le texte dans mon div:

Code : Tout sélectionner

function switchObj(div, textarea){
	if(div.style.display != "none"){
		div.style.display = "none";
		textarea.style.display = "block";
		textarea.value = div.innerHTML;
	}
	else{
		div.style.display = "block";
		textarea.style.display = "none";
		div.innerHTML = textarea.value;
	}
}

Code : Tout sélectionner

<div id="truc1" onclick="switchObj(this, document.getElementById('truc2'))">Texte</div>
<textarea id="truc2" style="display:none" onblur="switchObj(document.getElementById('truc1'), this)"></textarea>

Mais mon problème, c'est pour mettre en forme le texte dans mon div, et/ou y ajouter une image...

Avec IE, je peux editer le div directement, et j'utilise cette fonction pour mettre en forme le contenu:

Code : Tout sélectionner

// exécuter les commandes
function doCommand (idCommand){
	//setFocus();
	oSelection = document.selection.createRange();
	// Cas où police texte
	if(idCommand == "FontName"){
		if(arguments[1] != 1){
			document.execCommand(idCommand,false, arguments[1]);
			//setFocus();
			document.FontForm.FontSelect.selectedIndex = 0;
			return;
		}
	}
	// Cas où taille texte
	else if(idCommand == "FontSize"){
    	if(arguments[1] != 0){
      		document.execCommand(idCommand,false, arguments[1]);
			//setFocus();
			document.FontForm.FontSizeSelect.selectedIndex = 0;
			return;
    	} 
	}
	// Cas "ForeColor" ou "FormatBlock" ou "FormatBlock"
	else if(idCommand == "ForeColor" || idCommand == "BackColor" || idCommand == "FormatBlock"){
     	document.execCommand(idCommand,false, arguments[1]);
		//setFocus();
		return;
	}
	// Cas où suppression d'une ancre
	else if (idCommand == 'UnBookmark'){
		if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné
			// on essaye de sélectionner le caractère suivant
			oSelection.moveEnd("character", +1);
			oSelection.collapse();
			oSelection.expand("character");
			if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent
				oSelection.moveEnd("character", -2);
				oSelection.collapse();
				oSelection.expand("character");
				if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on ne sélectionne rien
					oSelection.collapse();
				}
			}
		}
		oSelection.select();
		oSelection = document.selection.createRange();
	}
	// Cas où insertion d'une ancre
	else if (idCommand == 'CreateBookmark'){
		var ancre = prompt("Entrez le nom de l'ancre","");
		if(ancre == ""){
			alert("Vous devez donner un nom à votre ancre");
			return;
		}
		else if(ancre){
			if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné
				// on essaye de sélectionner le caractère suivant
				oSelection.moveEnd("character", +1);
				oSelection.collapse();
				oSelection.expand("character");
				if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent
					oSelection.moveEnd("character", -2);
					oSelection.collapse();
					oSelection.expand("character");
					if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on sélectionne le mot
						oSelection.collapse();
						oSelection.expand("word");
						if(oSelection.text.lastIndexOf(" ") != -1){ // si le mot se termine par un espace => ne pas sélectionner l'espace
							oSelection.moveEnd("character", -1);
						}
					}
				}
				oSelection.select();
				oSelection = document.selection.createRange();
			}
			document.execCommand(idCommand, false, ancre);
		}
		return;
	}
	// Cas où insertion d'une image
	else if (idCommand == "insertImage"){
		Calk = window.document.getElementById("Avertissement_0");
		Calk.style.display = 'block' ;
		document.execCommand(idCommand, true);
		Calk.style.display = 'none' ;
		return;
	}
	// Exécute les autres commandes telles quelles
	document.execCommand(idCommand);
}

Comment faire pour que firefox puisse utiliser cette fonction pour mettre le contenu d'un div en forme?...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[nico@nc]

Tu as regardé ce donc calimo te parlait (voir aussi) ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[calitom]

Je viens d'essayer, et la consle javascript me retourne:

document.getElementById("iddiv").contentDocument has no properties

A quoi est ce du?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[calitom]

Comment faire pour appliquer cette méthode à un div?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[martin]

tu ne pourras pas utiliser contentEditable dans Firefox (du moins pas avant Firefox 3, ce sera une nouveauté ).

La seule chose que tu pourras faire, c'est utiliser designMode, comme les autres te l'ont dit (suis les liens qu'ils t'ont proposés ).
Et donc, n'utilises pas un div (qui n'a évidement pas de contentDocument), mais un iframe.

Je te préviens quand même, faire un tel éditeur opérationnel sur plusieurs navigateurs n'est pas forcément une partie de plaisir... (mais c'est possible )