Wysiwyg Html Editor

Un éditeur html wysiwyg (7)

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

Insertion d'images

Ca y est, aujourd'hui je vais au minimum me consacrer à la mise en place d'une boite de dialogue spécifique pour gérer l'insertion d'images.

Ca commence bien puisque je viens seulement de me rendre compte que la boite de dialogue standard propose bêtement les images disponibles sur le poste client, c'est à dire des fichiers qui sont enregistrés sur le disque dur de la personne qui va utiliser l'éditeur !

C'est pas du tout ce qu'il me faut ! Moi j'ai besoin que cela me propose les images qui existent sur le serveur. Ou alors, il faudrait que les images sélectionnées sur le poste client soient ensuite téléversées (uploadées) sur le serveur.

Ca confirme ce que je subodorais depuis un petit moment, il est vraiment indispensable de refaire la boite de dialogue d'insertion d'une image. Pour cela, j'entrevois au moins quatre possibilités:

faire une boite de dialogue calquée sur la boite de dialogue standard qui permette en plus de téléverser les images
faire une boite de dialogue où le bouton [Parcourir...] permette de sélectionner des images présentes sur le serveur
encore mieux, faire une boite de dialogue qui soit une combinaison des deux précédentes
plus simplement, faire une boite de dialogue dans laquelle on indique seulement l'url de l'image à insérer

Ploum. Ploum. Bon, je vais réaliser la quatrième méthode. En fait, c'est parce que c'est la seule pour laquelle il n'y ait pas à mettre en oeuvre des technologies serveurs (style php, asp ou asp.net). En plus, la boite de dialogue pour l'insertion de liens fonctionne déjà selon ce principe et ça ne pose pas de difficulté insurmontable.

Une boite de dialogue

Au moins, ce qu'il y a de bien dans le fait d'avoir choisi cette solution, c'est que la boite de dialogue n'est vraiment pas trop compliquée à mettre au point. Il suffit de partir du source de celle qui existe déjà pour l'insertion des liens et de simplement lui apporter quelques modifications:

suppression de la liste concernant le type de lien
ajout d'une liste de sélection pour aligner l'image

J'avais un peu hésité mais finalement j'ai préféré ne pas chercher à gérer l'épaisseur de la bordure (je l'ai initialisé à 0 pixels) et les espacements horizontal et vertical. D'autre part, j'ai limité (au moins pour l'instant) le nombre de choix possibles en ce qui concerne l'alignement.

<html>
 <head>
  <title>Image</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 l'image</legend>
    <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 />
    <label class="boxLabel" accesskey="A" for="lstAlign"><u>A</u>lignement</label>
    <select class="boxList" name="lstAlign" id="lstAlign">
     <option value="">(aucun)</option>
     <option value="left">Gauche</option>
     <option value="center">Centre</option>
     <option value="right">Droite</option>
    </select>
    <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é
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 alignement
document.getElementById("lstAlign").selectedIndex = 0;
if (window.dialogArguments[2] == "left")
 document.getElementById("lstAlign").selectedIndex = 1;
if (window.dialogArguments[2] == "center")
 document.getElementById("lstAlign").selectedIndex = 2;
if (window.dialogArguments[2] == "right")
 document.getElementById("lstAlign").selectedIndex = 3;
// met le focus sur la zone de saisie de l'url
document.getElementById("txtUrl").focus();
}

function CheckKey ()
{
// alert(event.keyCode);
// <Entrée> => simule un clic sur [ OK ]
if (event.keyCode == 13)
 document.getElementById("btnValider").click();
// <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 <img ...>
var sXhtml;
sXhtml = "";
if (document.getElementById("txtUrl").value != "")
 {
 // - url de l'image
 sXhtml = '<img src="' + document.getElementById("txtUrl").value + '"';
 // - légende de l'image
 if (document.getElementById("txtTitre").value != "")
  sXhtml = sXhtml + ' alt="' + document.getElementById("txtTitre").value + '"';
 // - alignement de l'image
 if (document.getElementById("lstAlign").value != "")
  sXhtml = sXhtml + ' align="' + document.getElementById("lstAlign").value + '"';
 // - bordure de l'image
 sXhtml = sXhtml + ' border="0px" />';
 }
// - renvoie le code généré
window.returnValue = sXhtml;
// - ferme la boite de dialogue
window.close();
}

//-->
</script>

Récupération d'image

Et pareil en ce qui concerne la fonction «doInsertImage()». Là encore il suffit presque quasiment de faire du copier-coler à partir de la fonction «doCreateLink()» avant de pouvoir enfin remplacer la ligne «document.execCommand(idCommand, true);» par la ligne «doInsertImage(oSelection);».

function doInsertImage (oSelection)
{
// Configure la boite de dialogue
var sFeatures;
sFeatures = "dialogHeight:160px;dialogWidth:450px;help:no;scroll:no;status:no";
// Teste si création ou modification d'une image
var bIsImage = false;
var aArguments;
aArguments = new Array();
if (oSelection.parentElement().tagName == "IMG")
	{
	// - mémorise qu'il y a déjà une image
	bIsImage = true;
	// - récupère l'url, la légende et l'alignement de l'image
	aArguments[0] = oSelection.parentElement().src;
	aArguments[1] = oSelection.parentElement().alt;
	aArguments[2] = oSelection.parentElement().align;
	}
else
	{
	// - initialise une nouvelle image
	aArguments[0] = "";
	aArguments[1] = "";
	aArguments[2] = "";
	}
// Affiche la boite de dialogue d'insertion d'une image
var sNewImage;
sNewImage = window.showModalDialog('insertImage1.htm', aArguments, sFeatures);
// Rien à faire si clic sur le bouton [Annuler] ou [X]
if (sNewImage == "~")
	return;
// Cas où pas d'image sélectionnée
if (sNewImage == "")
	{
	// => supprime éventuellement l'image en cours
	if (bIsImage == true)
		oSelection.parentElement().outerHTML = "";
	}
// Insère l'image saisie
if (sNewImage != "")
	{
	if (bIsImage == true)
		{
		// - remplace l'image en cours par la nouvelle image
		oSelection.parentElement().outerHTML = sNewImage;
		}
	else
		{
		// - insère la nouvelle image
		oSelection.pasteHTML(sNewImage);
		}
	}
}

Quelques difficultés

Tout ne pouvait pas être aussi simple que ça. Il me reste encore deux problèmes à résoudre. Tout d'abord, pour que la modification d'image fonctionne correctement, il faut ruser un peu au moment de sélectionner l'image. Par défaut, en cliquant dessus, elle est sélectionnée en tant que contrôle: les poignées (?) permettant de la redimensionner apparaissent. Si on clique alors sur le bouton [Image] en espérant modifier l'image, cela provoque une erreur de javascript.

Afin que la modification d'image fonctionne correctement, il faut la sélectionner en tant que texte: la sélection est mise en évidence par une couleur spéciale. Pour parvenir à cela avec une image, il faut placer le curseur juste avant l'image, cliquer puis maintenir la touche Majuscule enfoncée tout en appuyant sur la touche Flèche Droite. L'image apparait alors avec les couleurs définies pour les éléments sélectionnés et il suffit de sélectionner le bouton [Image] pour obtenir la boite de dialogue de gestion des images en mode modification.

Le second problème concerne l'utilisation d'une image pour définir un lien. C'est plus ou moins possible à condition de sélectionner l'image en mode texte puis de cliquer sur le bouton [Lien]. Malheureusement, ça ne fonctionne pas du tout en mode modification, que ce soit lorsque l'image est sélectionnée en mode contrôle (erreur javascript) ou en mode texte (on ontient la boite de dialogue en mode création de lien).

Conclusion

Hum, ça va encore me faire de nouveaux trucs à régler avant de pouvoir retravailler sur la transformation du code en xhtml. Mais au moins, j'ai (enfin presque) une boite de dialogue d'insertion d'image qui me semble quand même plus pratique que celle fournie par défaut.