[DOM] [Opera] définition ContentEditable via le DOM

Version imprimable

Bonjour,

Je souhaite créer un éditeur de texte en javascript.
Pour cela je créer mes éléments via le DOM avec une syntaxe de type :

Code:

document.createElement('div');

Jusqu'ici pas de souci. Mais, c'est lorsque que j'ajoute l'attribut contentEditable à mon div que je rencontre un léger bug sur Opéra : mon div, n'est pas "éditable".

voici un extrait de mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 attr.appendChild(divToolbar); attr.appendChild(divShowingElements); attr.appendChild(Hr2); var divEdit = document.createElement('div'); divEdit.contentEditable=true; divEdit.setAttribute("contentEditable", true); divEdit.className="editable"; divContent.appendChild(attr); var divEditArea = document.createElement('div'); divEditArea.style.clear="both"; divEditArea.style.display="block"; divEditArea.appendChild(divEdit); var textArea = textAreaField[textClasses.currentInstance]; divEdit.innerHTML=textArea.id; divEditArea.appendChild(textArea); divEditArea.appendChild(Hr4); divContent.appendChild(divEditArea); divContent.appendChild(Hr3);
J'ai également testé dans une nouvelle page et apparemment il semble qu'un élément ne peut être spécifier "éditable" que s'il fait déjà parti de la page HTML. Du coup, je vois une alternative pas trop propre qui est d'attribuer le contenteditable au parent (qui se trouve en dur dans la page HTML) et de mettre tout autres éléments que le div concerné en "contenteditable=false".

Bref, en fait, ce que je cherche c'est un moyen s'il existe de spécifier en javascript l'attribut contenteditable directement sur mon "divEdit".

Voilà, j'espère avoir été assez clair dans mes explications. :lol:

08/06/2009, 13h10
andry.aime

Salut,
Tu peux nous dire quelle version d' Opera tu utilises car contentEditable n'est supporté que par les versions récentes de navigateur à part IE. Je pense qu'il n'est supporté que par Opéra 9 (à vérifier).
08/06/2009, 13h19
Kayan

Oups, désolé...
Oui c'est bien ça, j'ai la version 9.63

Et j'ai oublié de préciser qu'avant, j'avais une version en écrite en html à laquelle je lui affecter quelques attributs en javascript et ça marchait nickel.

Sauf que maintenant que j'essaie de le faire en full JS, ça n'a pas l'air d'être du goût d'Opera. Et pourtant quand je fait un

Code:

alert(divEdit.getAttribute("contentEditable"));

Cela m'affiche bien "true".

Bon je viens de trouver, apparmment il faut insérer le noeud avant de lui spécifier l'attribut

dans mon code il y avait :

Code:

1
2
3
4
5
6
7
8
9
var divEdit = document.createElement('div');
					divEdit.contentEditable="true";
					divEdit.setAttribute("contentEditable", true);
					divEdit.className="editable";
					divContent.appendChild(attr);
					var divEditArea = document.createElement('div');
					divEditArea.style.clear="both";
					divEditArea.style.display="block";
					divEditArea.appendChild(divEdit);

et maintenant, j'ai changé par :

Code:

1
2
3
4
5
6
7
8
9
10
var divEdit = document.createElement('div');
					divEdit.contentEditable="true";
					divEdit.className="editable";
					divContent.appendChild(attr);
					var divEditArea = document.createElement('div');
					divEditArea.style.clear="both";
					divEditArea.style.display="block";
					divEditArea.appendChild(divEdit);
...
divEdit.setAttribute("contentEditable", true);

En gros il faut mettre le setAttribute à la fin.

Voilà, c'était bête, bon bah résolu...