Discussion :

[Kayan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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).

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Cela m'affiche bien "true".

[Kayan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...