Un éditeur html wysiwyg (2)
Note: les exemples de cette page ne fonctionnent toujours qu'avec Microsoft Internet Explorer 5.5 minimum.
Une barre d'outils
J'ai finalement remis ça et je n'ai pas pu m'empécher de faire quelques améliorations, même si je commence par la barre d'outils qui semble être ce qu'il y a de plus facile à réaliser.
Toujours d'après Microsoft, puis après m'être inspiré de différents articles et avoir récupéré quelques images, je réussi à bidouiller une première barre d'outils toute simple:
<img unselectable="on" src="ciBold.gif" onclick="document.execCommand('bold');" />
<img unselectable="on" src="ciItalic.gif" onclick="document.execCommand('italic');" />
<img unselectable="on" src="ciUnderline.gif" onclick="document.execCommand('underline');" />
</div>
<span id="memoTool1" contentEditable="true" style="{text-align:left; width:400px; height:75px; border:buttonface 1px solid;}"></span>
C'est un peu bizarre, mais ça a l'air d'aller avec «document.execCommand()». Vu que je ne passe pas par une <iframe>, j'avais d'abord essayé «document.getElementById('memoTool1').execCommand()», mais ça ne marchait pas.
Quelques fonctions supplémentaires
Comme j'ai la chance d'utiliser Visual Studio .Net, je tape «execCommand» dans la zone «Rechercher», je double-clique sur la première réponse qu'il me propose et je tombe pile sur l'information dont j'ai besoin. En suivant le lien sur «command identifiers», j'obtiens la liste complète des paramètres possibles pour la fonction «execCommand()».
Là, je retrouve les trois commandes 'bold', 'italic' et 'underline' parmi près de 75 autres valeurs - dont quand même une vingtaine qui ne sont pas encore gérées :). Il y a de quoi définir la police utilisée ('fontname' et 'fontsize'), les couleurs ('backcolor', 'forecolor') et tout plein d'autres trucs sans intérêt dans mon cas.
Je repère quand même quatre paramètres intéressants:
- 'copy' : copie l'élément actuellement sélectionné dans le presse-papiers
- 'cut' : supprime l'élément actuellement sélectionné et le place dans le presse-papiers
- 'paste' : insère le contenu du presse-papiers à l'emplacement du point d'insertion
- 'insertimage' : insère une image à l'emplacement du point d'insertion (je savais bien que je finirais par y arriver !)
Aussitôt trouvé, aussitôt codé :
<img unselectable="on" src="ciCut.gif" onclick="document.execCommand('cut');" />
<img unselectable="on" src="ciCopy.gif" onclick="document.execCommand('copy');" />
<img unselectable="on" src="ciPaste.gif" onclick="document.execCommand('paste');" />
<img unselectable="on" src="ciBold.gif" onclick="document.execCommand('bold');" />
<img unselectable="on" src="ciItalic.gif" onclick="document.execCommand('italic');" />
<img unselectable="on" src="ciUnderline.gif" onclick="document.execCommand('underline');" />
<img unselectable="on" src="ciInsertImage.gif" onclick="document.execCommand('insertImage', true);" />
</div>
<span id="memoTool2" contentEditable="true" style="{text-align:left; width:400px; height:75px; border:buttonface 1px solid;}"></span>
Un peu de cosmétique
Comme il faut bien savoir s'arrêter à un moment et être capable de livrer quelque chose de fini, juste quatre dernières retouches pour fignoler la barre d'outils.
- Tout d'abord, quelques petits trucs en CSS pour animer quelque peu le survol des boutons de
commande et simplifier la création de la barre d'outils et de la zone de texte.
<style>
.memoBar { text-align: left;
background-color: buttonface; }
.memoText { text-align: left;
border-left: buttonface 1px solid;
border-right: buttonface 1px solid;
border-bottom: buttonface 1px solid;
overflow-y: auto; }
.memoOut { background-color: buttonface;
border: 1px solid buttonface; }
.memoOver { background-color: '#ffffff';
border: 1px solid buttonshadow; }
</style>
- Toujours grace aux CSS, j'ai réussi à résoudre mon problème de hauteur d'interligne (j'ai
tout initialisé à 0 pixel, parce qu'apparament ça provient des marges 'top' et 'bottom' et que
ça ne peux pas faire de mal aux marges 'left' et 'right').
.memoText p { margin: 0px 0px 0px 0px; }
- Ensuite, j'ai aussi ajouté un bouton pour pouvoir créer des liens. Par rapport à la
reconnaissance automatique des adresses html, ça permet de sélectionner une partie du texte
puis de définir l'adresse html ou mél associée.
- Et pour finir, j'ai rajouté une bulle d'aide à chacun des boutons et j'ai utilisé une image pour avoir un joli séparateur entre les trois groupes de commande et aboutir à une barre d'outils qui ressemble le plus possible aux vrais. Ok, il y a encore quelques points qui me chiffonent mais ça suffira pour ce soir.
C'est vrai que le code commence à devenir un peu conséquent, mais ça n'a encore rien à voir avec celui des éditeurs super sophistiqués que j'ai pu trouver par ailleurs. Et surtout, presque tout est générique et sera donc réutilisable tel quel sans prise de tête.
<img unselectable="on" class="memoOut" src="ciCut.gif" onclick="document.execCommand('cut');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Couper (Ctrl X)" />
<img unselectable="on" class="memoOut" src="ciCopy.gif" onclick="document.execCommand('copy');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Copier (Ctrl C)" />
<img unselectable="on" class="memoOut" src="ciPaste.gif" onclick="document.execCommand('paste');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Coller (Ctrl V)" />
<img unselectable="on" src="ciSpacer.gif" title="" />
<img unselectable="on" class="memoOut" src="ciBold.gif" onclick="document.execCommand('bold');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Gras (Ctrl B)" />
<img unselectable="on" class="memoOut" src="ciItalic.gif" onclick="document.execCommand('italic');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Italique (Ctrl I)" />
<img unselectable="on" class="memoOut" src="ciUnderline.gif" onclick="document.execCommand('underline');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Souligné (Ctrl U)" />
<img unselectable="on" src="ciSpacer.gif" title="" />
<img unselectable="on" class="memoOut" src="ciCreateLink.gif" onclick="document.execCommand('createLink', true);" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Insérer un lien hypertexte (Ctrl K)" />
<img unselectable="on" class="memoOut" src="ciInsertImage.gif" onclick="document.execCommand('insertImage', true);" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Insérer une image" />
</div>
<span id="memoTool3" contentEditable="true" class="memoText" style="{width:400px; height:75px;}"></span>
Conclusion
Et voilà! J'ai maintenant une zone de saisie wywiwyg, avec une barre d'outils qui répond presque quasiment à mon besoin initial. Maintenant c'est certain, je vais encore bosser un peu dessus parce que je vais vouloir transformer le vieux code html qu'elle génère en xhtml moderne.
Publicités
