Un éditeur html wysiwyg (6)

Note: les exemples de cette page ne fonctionnent toujours qu'avec Microsoft Internet Explorer 5.5 minimum (sans parler du fait que je ne teste que sous IE6).

Ordre du jour

• Interdire d'éditer le reste de la page
• Pouvoir modifier un lien une fois généré
• Faire apparaitre une boite de dialogue d'insertion d'une image
• Réellement transformer l'html en xhtml

Contrôle de la mise en forme

En lisant un peu plus attentivement l'article Creating Editable Web Pages in Internet Explorer 5.5, je repère un paragraphe intitulé «Determining Whether an Element Is Editable» qui comme son titre l'indique explique comment déterminer si un élément est modifiable.

Apparament, il est préférable d'utiliser la propriété «isContentEditable» plutôt que la valeur de l'attribut «contentEditable» pour savoir si le texte sélectionné est modifiable ou non. Après quelques essais et un petit effort de réflexion, je parviens à modifier correctement la fonction «doCommand()» pour ne rien faire lorsque le texte n'est pas modifiable.

function doCommand (idCommand) { // Vérifie que le texte sélectionné est modifiable var oSelection; oSelection = document.selection.createRange(); if (oSelection.parentElement().isContentEditable != true) return; ...

Comme ça au moins il n'est plus possible de s'amuser à modifier le reste de la page. Par contre, s'il y a plusieurs zones de texte wysiwyg, la barre d'outils de l'une permettra de modifier le texte de l'autre, mais c'est quand même pas catastrophique.

Plus ennuyeux, je ne peux pas utiliser le bouton [Copier] pour récupérer un morceau de texte sélectionné dans le reste de la page, mais ça, ça peut s'arranger :

function doCommand (idCommand) { // Vérifie que le texte sélectionné est modifiable var oSelection; oSelection = document.selection.createRange(); if (oSelection.parentElement().isContentEditable != true) if (idCommand != 'copy') return; ...

Modification des liens

Par rapport à la boite de dialogue standard, mon système d'insertion de liens pose deux problèmes. Le premier dont j'étais au courant est qu'il n'est pas possible de modifier un lien. En faisant des tests, je viens également de m'apercevoir qu'il est possible de créer un lien sans avoir sélectionné de texte. Le lien est bien inséré, mais il n'est ensuite pas utilisable puisqu'il n'y a rien à cliquer !

Une solution simple serait d'interdire de définir un lien lorsqu'il n'y a pas de texte sélectionné, comme le fait le système standard. Cependant, d'après MSDN, «oSelection = document.selection.createRange();» me renvoie un objet «TextRange» correspondant au texte sélectionné. Et cet objet dispose d'une méthode expand() qui permet d'étendre la sélection d'un caractère, d'un mot ou d'une phrase. Par conséquent, en utilisant «oSelection.expand("word");» ça devrait automatiquement sélectionner le mot en cours (comme si on avait double cliqué dessus).

Encore quelques essais de nombreux tâtonnements et voilà:

// - sélectionne éventuellement le mot en cours if (oSelection.text == "") { oSelection.collapse(); oSelection.expand("word"); if (oSelection.text.charAt(oSelection.text.length - 1) == " ") oSelection.moveEnd("character", -1); oSelection.select(); oSelection = document.selection.createRange(); }

En ce qui concerne la modification d'un lien, la propriété tagName de l'objet renvoyé par la méthode parentElement() permet de déterminer s'il s'agit d'une balise de type lien. Encore plus beau, ça marche que le lien soit intégralement ou partiellement sélectionné voire même si le curseur est seulement situé à l'intérieur du texte du lien et qu'aucun texte n'est sélectionné.

if (oSelection.parentElement().tagName == "A") { alert("href = «" + oSelection.parentElement().href + "»"); alert("title = «" + oSelection.parentElement().title + "»"); }

Il ne me reste donc plus qu'à:

• transmettre ces deux valeurs (href et title) à ma boite de dialogue
• gérer le remplacement d'un lien au retour de cette boite de dialogue

Ca commence plutôt bien, puisque le 2° paramètre de la méthode showModalDialog() permet justement de passer des informations à une boite de dialogue. Après quelques explorations dans les différents exemples, j'abouti au code suivant:

// Teste si création ou modification d'un lien var aArguments; aArguments = new Array(); if (oSelection.parentElement().tagName == "A") { // - récupère l'url et la légende du lien aArguments[0] = oSelection.parentElement().href; aArguments[1] = oSelection.parentElement().title; } else { // - initialise un nouveau lien aArguments[0] = ""; aArguments[1] = ""; // - sélectionne éventuellement le mot en cours if (oSelection.text == "") ... } // Affiche la boite de dialogue de définition d'un lien var sNewLink; sNewLink = window.showModalDialog('createLink6.htm', aArguments, sFeatures);

Ca m'oblige quand même à modifier quelque peu ma boite de dialogue d'insertion d'un lien pour gérer ces paramètres. Je vous épargne les détails, mais après cette "petite" modification et quelques autres trucs pour améliorer sa présentation et son utilisation (c'est pas bien de perdre son temps avec des bricoles quand des trucs si compliqués attendent encore), voici ce que donne ma nouvelle boite de dialogue:

<html> <head> <title>Lien</title> <style> .boxDialog { clear: both; background-color: buttonface; border: 0px; margin: 5px; font-family: arial; font-size: 11px } .boxGroup1 { float: left; text-align: left; width: 345px; padding-left: 0px; padding-right: 10px; padding-bottom: 10px; } .boxLabel { width: 70px; padding-left: 10px; padding-right: 5px; padding-top: 15px;} .boxList { width: 70px; height: 20px; font-size: 10px; } .boxText { width: 255px; height: 20px; font-size: 10px; } .boxGroup2 { float: left; text-align: center; width: 90px; } .boxButton { width: 80px; margin-top: 6px; } </style> </head> <body class="boxDialog" onload="InitForm();" onkeypress="CheckKey();"> <form name="frmLink" id="frmLink"> <fieldset class="boxGroup1"> <legend>Informations sur le lien</legend> <label class="boxLabel" accesskey="T" for="lstType"><u>T</u>ype</label> <select class="boxList" name="lstType" onchange="SelectType(this.selectedIndex);" id="lstType"> <option value="">(autre)</option> <option value="ftp://">ftp:</option> <option value="http://">http:</option> <option value="https://">https:</option> <option value="mailto:">mailto:</option> </select> <br /> <label class="boxLabel" accesskey="U" for="txtUrl"><u>U</u>RL</label> <input class="boxText" name="txtUrl" value="" size="40" maxlength="255" id="txtUrl" /> <br /> <label class="boxLabel" accesskey="L" for="txtTitre"><u>L</u>égende</label> <input class="boxText" name="txtTitre" value="" size="40" maxlength="255" id="txtTitre" /> <br /> </fieldset> <div class="boxGroup2"> <button class="boxButton" id="btnValider" onclick="SubmitForm();"><b>OK</b></button> <br /> <button class="boxButton" id="btnAnnuler" onclick="window.close();">Annuler</button> </div> </form> </body> </html> <script language="JavaScript" type="text/javascript"> <!-- function InitForm () { // - valeur de retour par défaut pour signifier que rien n'a changé // (sera renvoyé quand clic sur [Annuler] ou [X]) window.returnValue = "~"; // - initialise la zone url document.getElementById("txtUrl").value = window.dialogArguments[0]; // - initialise la zone légende document.getElementById("txtTitre").value = window.dialogArguments[1]; // - initialise la zone type document.getElementById("lstType").selectedIndex = 0; if (window.dialogArguments[0] == "") SelectType(2); // met le focus sur la zone de saisie de l'url document.getElementById("txtUrl").focus(); } function SelectType (iOption) { // Modification du type de lien document.getElementById("lstType").selectedIndex = iOption; document.getElementById("txtUrl").value = document.getElementById("lstType").value; document.getElementById("txtUrl").focus(); } function CheckKey () { // Appui sur <Entrée> => simule un clic sur [ OK ] if (event.keyCode == 13) document.getElementById("btnValider").click(); // Appui sur <Echap> => simule un clic sur [ Annuler ] if (event.keyCode == 27) document.getElementById("btnAnnuler").click(); } function SubmitForm () { // Sélection du bouton [ OK ] // - défini le code xhtml de la balise <a ...> var sXhtml; sXhtml = ""; if (document.getElementById("txtUrl").value != "") { // - url du lien sXhtml = '<a href="' + document.getElementById("txtUrl").value + '"'; // - légende du lien if (document.getElementById("txtTitre").value != "") sXhtml = sXhtml + ' title="' + document.getElementById("txtTitre").value + '"'; sXhtml = sXhtml + '>'; } // - renvoie le code généré window.returnValue = sXhtml; // - ferme la boite de dialogue window.close(); } //--> </script>

Pour gérer la création, la modification et même la suppression d'un lien au retour de la boite de dialogue, ça n'est finalement pas trop compliqué :

• il n'y a rien à faire quand on a cliqué sur le bouton [Annuler] ou qu'on a fermé la boite de dialogue (ce qui renvoie une chaine contenant un tilde)
• si on n'a pas défini de lien (la boite de dialogue renvoie une chaine vide), soit il n'y a rien à faire soit il faut supprimer le lien en cours
• quand la boite de dialogue a renvoyé un lien, il faut soit l'insérer tel quel, soit remplacer le lien en cours

// Rien à faire si clic sur le bouton [Annuler] ou [X] if (sNewLink == "~") return; // Cas où pas de lien sélectionné if (sNewLink == "") { // => supprime éventuellement le lien en cours if (oSelection.parentElement().tagName == "A") oSelection.parentElement().outerHTML = oSelection.parentElement().innerHTML; } // Insère le lien saisi if (sNewLink != "") { if (oSelection.parentElement().tagName == "A") { // - remplace le lien en cours par le nouveau lien sNewLink = sNewLink + oSelection.parentElement().innerHTML + "</a>"; oSelection.parentElement().outerHTML = sNewLink; } else { // - insère le nouveau lien sNewLink = sNewLink + oSelection.htmlText + "</a>"; oSelection.pasteHTML(sNewLink); } }

Sinon, je croyais ne pas avoir de problème en ce qui concernait le code xhtml relatif aux liens puisque je le génère moi-même. Malheureusement, tous ces essais m'ont permi de me rendre compte que lorsque la légende ne contient qu'un seul mot, les guillemets disparaissent automatiquement. Encore un truc qu'il faudra régler quand je m'attaquerai sérieusement à la transformation en xhtml.

Conclusion

Finalement, tout ça c'est avéré un peu plus compliqué que ce que je pensais et je n'ai plus le temps (et le courage) de m'attaquer dès maintenant à tout ce que j'avais prévu pour aujourd'hui.

En attendant la prochaine fois où je risque d'avoir pas mal de boulot en ce qui concerne la gestion des images (sans compter qu'il faut aussi tenir compte du cas où une image sert pour définir un lien), j'ai déjà un éditeur html wysiwyg qui gére enfin complètement des liens accessibles.

Tester

Publicités