Wysiwyg Html Editor

Un éditeur html wysiwyg (5)

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

Nouveau départ

Après quatre séances de travail, je commence à partir dans tous les sens et à manquer de motivation. Comme il est de saison de prendre de bonnes résolutions, il est grand temps d'essayer de rationaliser tout ça avant d'envisager quoique ce soit d'autre.

Mon objectif initial étant d'avoir un éditeur simple à utiliser, je vais revenir à l'essentiel et réorganiser ce que j'ai déjà fait en trois fichiers de façon à le rendre plus facilement réutilisable :

une feuille de style
une barre d'outils
un fichier de script

Wysiwyg.css

Il s'agit de la feuille de style à définir une seule fois dans chaque page qui doit gérer une ou des zones de texte wysiwyg. C'est assez facile puisque cette feuille de style existe déjà et que je n'ai qu'à l'améliorer un peu, la commenter puis la placer dans un fichier «Wysiwyg.css»:

.memoBar {                               /* Barre d'outils                   */
  text-align: left;                      /* - boutons alignés à gauche       */
  background-color: buttonface;          /* - couleur de fond de windows     */
}
.memoOver {                              /* Boutons sélectionnés             */
  background-color: '#ffffff';           /* - couleur de fond de windows     */
  border: 1px solid buttonshadow;        /* - bordure de couleur plus foncée */
}
.memoOut {                               /* Boutons non sélectionnés         */
  background-color: buttonface;          /* - couleur de fond de windows     */
  border: 1px solid buttonface;          /* - bordure de même couleur        */
}
.memoText {                              /* Zone de texte wysiwyg            */
  text-align: left;                      /* - texte cadré à gauche           */
  border-left: buttonface 1px solid;     /* - bordure à gauche               */
  border-right: buttonface 1px solid;    /* - bordure à droite               */
  border-bottom: buttonface 1px solid;   /* - bordure au fond                */
  overflow-y: auto;                      /* - avec un ascenceur vertical     */
  overflow-x: hidden;                    /* - sans ascenceur horizontal      */
}
.memoText p {                            /* Paragraphes dans la zone wysiwyg */
  margin: 0px 0px 0px 0px;               /* (évite l'interligne trop grande) */
}
.memoText a {                            /* Liens dans la zone wysiwyg       */
  color: blue;                           /* - de couleur bleu classique      */
  text-decoration : underline;           /* - et soulignés                   */
}

Par rapport à ce qui existait déjà, j'ai aussi ajouté «overflow-x: hidden;» pour éviter qu'apparaisse une barre de défilement horizontal au cas où quelqu'un s'amuserait à taper des mots trops longs pour tenir sur une seule ligne.

Wysiwyg.tb

Ca c'est le code xhtml qui sert à construire la barre d'outils. Ces quelques lignes de code sont à insérer avant chaque zone de texte wysiwyg. Le principe étant d'avoir quelque chose de générique pour pouvoir l'insérer tel quel, le fichier «Wysiwyg.tb» ne doit donc pas:

définir la largeur de la barre d'outils (~~style="{width:400px;}"~~)
faire référence à la zone de saisie (~~document.all('memoHtml1').innerHTML~~),

<img src="ciCut.gif" onclick="doCommand('cut');" title="Couper (Ctrl X)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="ciCopy.gif" onclick="doCommand('copy');" title="Copier (Ctrl C)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="ciPaste.gif" onclick="doCommand('paste');" title="Coller (Ctrl V)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img unselectable="on" src="ciSpacer.gif" title="" />
<img src="ciBold.gif" onclick="doCommand('bold');" title="Gras (Ctrl B)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="ciItalic.gif" onclick="doCommand('italic');" title="Italique (Ctrl I)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="ciUnderline.gif" onclick="doCommand('underline');" title="Souligné (Ctrl U)"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="cistrikeThrough.gif" onclick="doCommand('strikeThrough');" title="Barré"
     unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img unselectable="on" src="ciSpacer.gif" title="" />
<img src="ciCreateLink.gif" onclick="doCommand('createLink');"
     title="Insérer un lien hypertexte" unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />
<img src="ciInsertImage.gif" onclick="doCommand('insertImage');"
     title="Insérer une image" unselectable="on" class="memoOut"
     onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" />

Quelques remarques:

J'ai ajouté le style de police barré (strikeThrough), puique ça marche même si Microsoft dit qu'it is "Not currently supported." (ils nous cachent des choses !!!)
Je passe par une fonction JavaScript doCommand() pour encapsuler la fonction execCommand() et appliquer la mise en forme parce que ça devrait être plus simple pour faire quelques contrôles, parce qu'il faut bien mettre quelque chose dans le fichier de scripts et puis aussi parce qu'apparament tout le monde fait comme ça.
A l'avenir, il devrait suffire de créer plusieurs fichiers .tb avec des contenus différents pour parvenir à définir des barres d'outils types, proposant plus ou moins de fonctionnalités, sans changer quoique ce soit aux autres fichiers.

Wysiwyg.js

Ce script contient les fonctions JavaScript (ou plutôt Microsoft JScript) nécessaires pour éditer le texte. C'est un fichier à intégrer une seule fois dans les pages qui gèrent une ou des zones de texte wysiwyg. Pour l'instant, ça ne fait pas grand chose à part traiter le cas de l'insertion d'un lien ou d'une image et d'appeler la fonction execCommand() pour qu'elle prenne en charge la mise en forme.

Il contient également les fonctions:

CopyContent() : pour copier le texte mis à jour dans un champs <textarea> de façon à pouvoir le récupérer via un formulaire
HtmlToXhtml() : pour transformer le code html en xhtml (dès que j'aurais un peu mieux compris comment utiliser les expressions régulières)

La prochaine fois, ça devrait donc permettre en plus:

d'interdire d'éditer le reste de la page
de pouvoir modifier un lien une fois généré
de faire apparaitre une boite de dialogue d'insertion d'une image
de réellement transformer l'html en xhtml

function doCommand (idCommand)
{
// Cas où insertion d'un lien
if (idCommand == 'createLink')
	{
	doCreateLink();
	return;
	}

// Cas où insertion d'une image
if (idCommand == "insertImage")
	{
	document.execCommand(idCommand, true);
	return;
	}

// Exécute les autres commandes telles quelles
document.execCommand(idCommand);
}

function doCreateLink ()
{
// Configure la boite de dialogue
var sFeatures;
sFeatures = "dialogHeight:160px;dialogWidth:450px;help:no;scroll:no;status:no";
// Affiche la boite de dialogue de création d'un lien
var sNewLink;
sNewLink = window.showModalDialog('createLink3.htm', '', sFeatures);
// Insère le lien saisi
if (sNewLink != "")
	{
	var oSelection = document.selection.createRange();
	sNewLink = sNewLink + oSelection.htmlText + "</a>";
	sNewLink = sNewLink.replace(" </a>", "</a> ");
	oSelection.pasteHTML(sNewLink);
	}
}

function CopyContent (sHtmlSource, sTextTarget)
{
// Récupère le code html de la zone de texte wysiwyg
var sHtml = document.getElementById(sHtmlSource).innerHTML;
// Transforme le code html en xhtml
var sXhtml = HtmlToXhtml(sHtml);
// Copie ce code xhtml dans un textarea pour récupération via un formulaire
document.getElementById(sTextTarget).innerText = sXhtml;
}

function HtmlToXhtml (sHtmlCode)
{
// Transformation de code html en xhtml (enfin c'est ce que ça fera plus tard)
return(sHtmlCode);
}

Note: ce script fait appel au fichier «createLink3.htm» mis au point dans la 3° partie consacrée à l'insertion de liens hypertextes.

Conclusion

Petit à petit, on aboutit un éditeur html wysiwyg qui ressemble de plus en plus à ce que je cherchais à obtenir il y a un peu plus d'un mois.

<html>
  <head>
    <title>Wysiwyg Html Editor</title>
    <link rel="stylesheet" href="wysiwyg5.css" type="text/css" />
    <script type="text/javascript" src="wysiwyg5.js"></script>
  </head>
  <body>
    ...
    <div class="memoBar" style="{width:400px;}">
    <!--#include file="wysiwyg5.tb" -->
    </div>
    <div contentEditable="true" class="memoText"
          id="memoHtml1" style="{width:400px; height:60px;}">
    Un peu de texte déjà saisi pour ne pas perdre de temps à en retaper à chaque essai.
    </div>
    <button onclick="CopyContent('memoHtml1', 'areaHtml1');"> HTML </button><br />
    <textarea id="areaHtml1" style="{width:400px; height:120px;}"></textarea><br />
    ...
  </body>
</html>