Page 1 sur 1
equivalent contentEditable
Publié : 10 sept. 2007, 15:36
par 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
Publié : 10 sept. 2007, 16:08
par Mori
salut,
installe greasemonkey et/ou platypus
http://extensions.geckozone.org/Firefox/
Publié : 11 sept. 2007, 10:41
par 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
Publié : 11 sept. 2007, 10:59
par 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.
Publié : 11 sept. 2007, 11:27
par 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...
Publié : 11 sept. 2007, 15:41
par 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
Publié : 11 sept. 2007, 17:12
par 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 
Publié : 11 sept. 2007, 17:14
par nico@nc
Tu devrais pouvoir faire quelque chose avec ça :
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 12 sept. 2007, 13:01
par 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
Publié : 12 sept. 2007, 13:16
par 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
Publié : 12 sept. 2007, 14:31
par 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
Publié : 12 sept. 2007, 15:16
par 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
Publié : 12 sept. 2007, 15:45
par 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
)