Wysiwyg Html Editor

Un éditeur html wysiwyg (3)

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

Des liens accessibles

Aujourd'hui, je vais m'attaquer à l'ajout de liens, de façon à pouvoir définir l'url et le titre du lien. Avec la commande «execCommand('createLink', true)» une boite de dialogue apparait automatiquement pour paramétrer l'url du lien. Selon la documentation, il est également possible de créer un lien en utilisant la syntaxe «execCommand('createLink', false, 'http://www.msn.fr/')».

J'essaie d'abord avec une url en dur :

<button onclick="document.execCommand('createLink', false, 'http://www.msn.fr/'); alert('ca y est');"> Insérer </button>&nbsp;&nbsp;
<button onclick="alert(document.all('memoTool1').innerHTML);"> Html </button><br />
<span id="memoTool1" contentEditable="true" style="{width:400px; height:75px; border:black 1px dotted; overflow-y: auto;}"></span>

Sélectionner le mot «exemple» (en double-cliquant entre les guillemets), cliquer sur le bouton [Insérer] pour créer le lien puis sur le bouton [Html] pour afficher le code html généré.

Ok, ça marche, mais ç'est la moindre des choses vu que c'était dans la doc. Reste maintenant à ouvrir une fenêtre spéciale pour saisir la définition du lien. Ca devient un peu plus compliqué puisqu'il va falloir :

utiliser du javascript pour ouvrir la fenêtre,
créer une nouvelle page html pour saisir l'url et la légende du lien,
récupérer ce qui aura été saisi dans la fenêtre popup

Une boite de dialogue

Pour ouvrir la fenêtre externe, après avoir perdu un peu de temps à tenter d'utiliser «window.open()» je fini par employer «window.showModalDialog()» parce que ça me permet d'avoir une fenêtre modale et surtout de récupérer facilement les données saisies.

<button onclick="AddTest();"> Insérer </button>&nbsp;&nbsp;
<button onclick="alert(document.all('memoTool2').innerHTML);"> Html </button><br />
<span id="memoTool2" contentEditable="true" style="{width:400px; height:60px; border:black 1px dotted; overflow-y: auto;}"></span>
<script language="JavaScript" type="text/javascript">
<!--
function AddTest ()
{
var sNewLink;
sNewLink = window.showModalDialog('createLink2.htm', '', '');
if (sNewLink != "")
 document.execCommand('createLink', false, sNewLink);
}
//-->
</script>

Pour la page servant à saisir l'url et la légende, je commence par quelque chose d'assez simple, parce que je sens que le plus compliqué va être d'arriver à récupérer les deux valeurs (l'url et la légende) puis de réussir à créer un lien avec un attribut «title» pour la légende.

<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: 300px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
   .boxLabel  { width: 45px; padding-right: 5px; padding-top: 15px;}
   .boxList   { width: 70px; height: 20px; font-size: 10px; }
   .boxText   { width: 225px; height: 20px; font-size: 10px; }
   .boxGroup2 { float: left; text-align: center; width: 99px; }
   .boxButton { width: 80px; margin-top: 7px;}
  </style>
 </head>
 <body style="background-color: buttonface;" onload="SelectType(2);">
  <form name="frmLink" id="frmLink">
   <fieldset>
    <legend>Informations sur le lien</legend>
    Type :
    <select name="lstType" onchange="SelectType(this.selectedIndex);">
     <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 />
    URL :
    <input name="txtUrl" value="" size="40">
    <br />
    Titre :
    <input name="txtTitre" value="" size="40">
    <br />
   </fieldset>
   <div align="right">
    <input type="button" value="    OK    " name="btnValider" onclick="SubmitForm();">
       <input type="button" value=" Annuler " name="btnAnnuler" onclick="CancelForm();">
   </div>
  </form>
 </body>
</html>
<script>
function CancelForm ()
{
window.returnValue = "";
window.close();
}
function SubmitForm ()
{
window.returnValue = document.getElementById("txtUrl").value;
window.close();
}
function SelectType (iOption)
{
document.getElementById("lstType").selectedIndex = iOption;
document.getElementById("txtUrl").value = document.getElementById("lstType").value;
document.getElementById("txtUrl").focus();
}
</script>

Sélectionner le mot «exemple» (en double-cliquant entre les guillemets), cliquer sur le bouton [Insérer] pour afficher la fenêtre de définition du lien puis sur le bouton [Html] pour afficher le code html généré.

Insérer l'attribut <title>

Bon, ça a marché, même si la boite de dialogue a pour l'instant une drôle de gueule. Il faut maintenant trouver un truc pour récupérer la légende du lien et l'exploiter . Voyons déjà comment faire pour arriver à définir la balise «title».

Un premier essai trop trivial n'est malheureusement pas accepté :
var sNewLink = "<a href='http://www.msn.fr/' title='cliquez-ici :)'>"; document.execCommand("createLink", false, sNewLink); => ... le mot «<A href="<a href='http://www.msn.fr/' title='cliquez-ici :)'>">exemple</A>» (en double...
Apparament «execCommand()» n'analyse pas du tout le lien fourni et se contente de l'utiliser tel quel pour l'attribut «href».
Un second essai basé sur la technique de blogger ne donne pas de meilleur résultat :
var sNewLink = "<a href='http://www.msn.fr/' title='cliquez-ici :)'>"; var oSel = document.selection.createRange(); oSel.text = sNewLink + oSel.text + "</a>"; => ...le mot «<a href='http://www.msn.fr/' title='cliquez-ici :)'>exemple</a>» (en double...
Dans ce cas, le lien est encodé avant d'être inséré : le < est transformé en < et le > en > ce qui fait que l'on obtient le "source" du lien au lieu d'insérer le lien lui-même. C'est parfait pour un bête <textarea>, mais tout à fait insuffisant pour un <span> wysiwyg. Ok, c'est pas clair du tout, mais vu que ça ne marche pas, ce n'est pas la peine de s'appesantir sur le sujet.
Ce qu'il faudrait donc, c'est pouvoir coller «<a href='http://www.msn.fr/' title='cliquez-ici :)'>» en tant que code html plutôt qu'en texte encodé. Encore une fois, Visual Studio.Net est une bénédiction, puisqu'en cherchant "paste html" dans la fenêtre "Recherche", bingo! la méthode pasteHTML apparait immédiatement sur la 2° ligne et là c'est gagné!
var sNewLink = "<a href='http://www.msn.fr/' title='cliquez-ici :)'>"; var oSel = document.selection.createRange(); oSel.pasteHTML(sNewLink + oSel.text + "</a>"); => ...le mot «exemple» (en double...

Une vrai boite de dialogue

Je ne vais pas montrer de suite un exemple avec la méthode "pasteHTML", parce qu'il y a encore quelques petits réglages à faire pour aboutir à un résultat satisfaisant.

Après tous ces efforts pour trouver comment gérer l'attribut "title", je préfère continuer par quelque chose d'un peu plus amusant et essayer de donner un "look" windows à ma fenêtre popup. Après une explosion des délais dûe à des bidouillages insensés en matière de css, je réussi à produire une boite de dialogue tiptop :

<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: 340px; 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: 250px; height: 20px; font-size: 10px; }
   .boxGroup2 { float: left; text-align: center; width: 95px; }
   .boxButton { width: 80px; margin-top: 6px; }
  </style>
 </head>
 <body class="boxDialog" onload="SelectType(2);">
  <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">
    <input type="button" class="boxButton" value=" OK " id="btnValider" name="btnValider" onclick="SubmitForm();">
    <br />
    <input type="button" class="boxButton" value=" Annuler " id="btnAnnuler" name="btnAnnuler" onclick="window.close();">
   </div>
  </form>
 </body>
</html>
<script>
function SubmitForm ()
{
var sLink;
sLink = "";
if (document.getElementById("txtUrl").value != "")
 {
 sLink = '<a href="' + document.getElementById("txtUrl").value + '"';
 if (document.getElementById("txtTitre").value != "")
  sLink = sLink + ' title="' + document.getElementById("txtTitre").value + '"';
 sLink = sLink + '>';
 }
window.returnValue = sLink;
window.close();
}
function SelectType (iOption)
{
window.returnValue = "";
document.getElementById("lstType").selectedIndex = iOption;
document.getElementById("txtUrl").value = document.getElementById("lstType").value;
document.getElementById("txtUrl").focus();
}
</script>

Ca c'était le source de la boite de dialogue, et maintenant le code pour l'afficher, récupérer les informations sur le lien et insérer le lien :

function AddLink ()
{
var sFeatures;
sFeatures = "dialogHeight:155px;dialogWidth:450px;help:no;scroll:no;status:no";
var sNewLink;
sNewLink = window.showModalDialog('createLink3.htm', '', sFeatures);
if (sNewLink != "")
 {
 oSelection = document.selection.createRange();
 sNewLink = sNewLink + oSelection.text + "</a>";
 sNewLink = sNewLink.replace(" </a>", "</a> ");
 oSelection.pasteHTML(sNewLink);
 }
}

Une fois qu'on remet la barre d'outils de la semaine dernière, ça donne un

Un peu de texte déjà saisi pour ne pas perdre de temps à en retaper à chaque essai.

Conclusion

Le problème, c'est qu'en utilisant simplement createLink, il était possible de modifier le lien et plus maintenant. En plus, ça ne marche plus trop pour insérer un lien à partir d'une image. Après quelques essais rapides, j'entrevoie quelques pistes, mais je m'en occuperai plus tard.