Dernière mise à jour :2008-10-14

informatique

Méthode execCommand et propriété contentEditable de Microsoft

Dans le domaine de l'édition de page web, il existe une panopli de logiciel permettant de faciliter l'édition du code. Certaine compagnie tel Microsoft ou Macromedia propose des outils très évolués permettant l'édition de page de type WYSIWYG (what you see is what you get) c'est à dire que vous écrivez votre texte, placez vos images etc et pendant ce temps, le logiciel s'occupe de créer votre code HTML. En utilisant la méthode execCommand combinée à la propriété contentEditable du modèle d'objet de Microsoft permettent la création de zone éditable du type WYSIWYG.

contentEditable

Cette propriété ou attribut permet d'indiquer si un utilisateur peut editer le contenu d'un certain objet.

Syntaxe en HTML: <ELEMENT CONTENTEDITABLE="...">
Syntaxe en language de script: objet.contentEditable

Les valeurs possible que peut prendre cette propriété sont les suivante:'true' ou 'false' qui détermine respectivement si oui ou non le contenu sera éditable et finalement, la valeur 'inherit' qui est la valeur par défaut, prend la valeur de l'objet parent.

À noter que les éléments TABLE, TBODY, TR, TD ainsi que quelques autres éléments ne sont pas doté de cette propriété. Un compromi pourrait par contre être fait en ajoutant un élément div dans une cellule du tableau sur lequel ont désire assigner cette propriété. De plus, seul le corps d'un document () peut être interpréter dans un objet contentEditable c'est à dire que toutes informations contenu en dehors de cette balise comme par exemple un script intégré dans une balise head ne peut être pris en charge.

execCommand

Cette méthode permet l'exécution d'une commande sur un objet quelconque.

syntaxe en language de script: variableBooleene = objet.execCommand(commande,blnInterfaceUtilisateur,valeur)

La fonction retourne une valeur bouléenne qui permet de savoir si oui ou non la command s'est exécutée avec succès. Le premier paramètre permet d'indiquer le nom de la commande, le second permet de spécifier si oui ou non une interface utilisateur doit être présentée dans le cas d'une commande qui supporte une certaine interface utilisateur. Certaine commande nécessite une valeur, c'est le role du dernier paramètre.

Le code ci-dessous démontre l'utilisation de cette méthode et propriété en créant un mini éditeur de page HTML:

Listing 1.0 éditeur HTML
1. <HTML>
2. <head>
3. <title>éditeur HTML v1.0</title>
4. <script language="javascript">
5. <!--
6. function ShowHide(id1,id2)
7. {
8.  document.all[id1].style.zIndex ++;
9.   document.all[id2].style.zIndex --;
10. }
11. // -->
12. </script>
13. </head>
14. <body>
15. <div style="position:absolute; left:400;top:50;background-color:#eeeeee; border:2px groove black;padding:10px; font-family:verdana;">
16. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("Bold"); DIVEditBoxNormal.focus();' >Gras</a>
17. <br>
18. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("Italic"); DIVEditBoxNormal.focus();' >Italic</a>
19. <br>
20. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("Underline"); DIVEditBoxNormal.focus();' >Souligné</a>
21. <br>
22. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("JustifyLeft"); DIVEditBoxNormal.focus();' >Aligné à gauche</a>
23. <br>
24. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("JustifyCenter"); DIVEditBoxNormal.focus();' >Centré</a>
25. <br>
26. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("JustifyRight"); DIVEditBoxNormal.focus();' >Aligné à droite</a>
27. <br>
Listing 1.0 (suite)
28. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("CreateLink"); DIVEditBoxNormal.focus();' >Lien hypertexte</a>
29. <br>
30. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("InsertUnorderedList"); DIVEditBoxNormal.focus();' >Liste</a>
31. <br>
32. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("InsertOrderedList"); DIVEditBoxNormal.focus();' >Liste ordonnée</a>
33. <br>
34. <a href="#" onclick='if (DIVEditBoxNormal.isContentEditable==true) document.execCommand("InsertHorizontalRule"); DIVEditBoxNormal.focus();' >Ligne horizontale</a>
35. <br>
36. <SELECT NAME="selectFontSize" onChange='document.execCommand("FontSize", false,this[this.selectedIndex].value); DIVEditBoxNormal.focus();' id='select1'>
37.  <OPTION VALUE="1" SELECTED>1</option>
38.  <OPTION VALUE="2">2</OPTION>
39.  <OPTION VALUE="3">3</OPTION>
40.  <OPTION VALUE="4">4</OPTION>
41.  <OPTION VALUE="5">5</OPTION>
42.  <OPTION VALUE="6">6</OPTION>
43.  <OPTION VALUE="7">7</OPTION>
44. </SELECT>
45. <br>
46. <SELECT NAME="selectFontName" onChange='document.execCommand("FontName", false,this[this.selectedIndex].value); DIVEditBoxNormal.focus();' id='select2'>
47.  <OPTION VALUE="Arial" SELECTED>Arial</option>
48.  <OPTION VALUE="Courier">Courier</OPTION>
49.  <OPTION VALUE="Helvetica">Helvetica</OPTION>
50.  <OPTION VALUE="Times New Roman">Times New Roman</OPTION>
51. </SELECT>
52. <br>
53. <!-- onglet normal -->
54.  <DIV id="DIVOngletNormal" onClick="ShowHide('DIVEditBoxNormal', 'DIVEditBoxHTML'); DIVEditBoxNormal.innerHTML=DIVEditBoxHTML.value; DIVEditBoxNormal.focus();">
55.   <button>NORMAL</button>
56.  </DIV>
57. <!-- onglet HTML -->
58.  <DIV id="DIVOngletHTML" onClick="ShowHide('DIVEditBoxHTML', 'DIVEditBoxNormal'); DIVEditBoxHTML.value=DIVEditBoxNormal.innerHTML; DIVEditBoxHTML.focus();">
59.   <button>HTML</button>
60.  </DIV>
61. </div>
62. <!-- Boite d'édition en mode normal -->
63.  <DIV id="DIVEditBoxNormal" contenteditable="true" ALIGN=left style="position:absolute;left:50;top:50;width:300; height:300;z-index:2;background-color:ffffff; border:1px groove #ff4455;"></DIV>
64. <!-- Boite d'édition de code HTML -->
65.  <TEXTAREA id="DIVEditBoxHTML" ALIGN=left style="position:absolute; left:50;top:50;width:300;height:300;z-index:1;"></TEXTAREA>
66. </BODY>
67. </HTML>

Fonctionnement de l'interface

L'interface est divisée en deux parties. À droite de l'écran, on retrouve une boite affichant les diverses options disponibles. La section de gauche est constituée d'une zone d'édition de type WYSIWYG ainsi que d'une boite d'édition de code HTML. Deux boutons sont placés au bas de la boite d'option pour permettre de changer de mode (édition HTML ou WYSIWYG). Les autres options servent à modifier l'aspect de la boite d'édition en mode WYSIWYG.

Détail du listing

Le corps du programme est divisé en deux parties distinctes à l'aide de deux balises

. La première (lignes 15 à 61) contient le code HTML permettant l'affichage des différentes options et la seconde (lignes 62 à 65) permet d'afficher les deux zone d'édition.

Fonction ShowHide

Les boutons 'HTML' et 'NORMAL' qui permettent de passer en mode HTML ou WYSIWYG sont relié à la fonction ShowHide (montrer/cacher) qui est définie entre les lignes 6 à 10. Cette fonction ne fait que décrémenter la propriété z-index de la boite qui doit être caché et incrémenter la propriété z-index de la boite qui doit être montré.

La première option de la zone de droite (ligne 16) permet d'enlever ou d'appliquer la mise en évidence (caractère gras) du texte sélectionné dans la zone d'édition WYSIWYG. L'événement onclick de cet objet vérifit d'abord si la boite d'édition est 'contentEditable' et donc, permet l'édition en mode WYSIWYG et ensuite, il démarre la méthode execCommand avec le nom de commande 'Bold' ce qui permet de mettre ou pas le texte en évidence. Finalement, le focus est dirigé vers la boite d'édition en mode WYSIWYG.

Toutes les autres options fonctionne sur ce principe, mis à par les deux listes défilente qui utilise l'événement onchange plutot que onclick.

Si vous désirez visionner l'exemple, cliquez ici.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2001-08-21

Aucun commentaire pour l'instant.