Un éditeur html wysiwyg (4)

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

Du bel xhtml

Ca y est! Je vais enfin me mettre à ce que je promet depuis le début et transformer ce vilain code html généré automatiquement en un charmant code xhtml. Pour commencer, je met en place une zone wysiwyg simple pour étudier ce que donne le code html.

Du texte tout prêt pour tester :
- le gras,
- l'italique,
- le souligné

Deux constatations d'entrée de jeu:

• les balises <br /> ont été transformées <BR> (ça commence bien !)
• ça n'utilise pas les balises <B> et <I> mais <STRONG> et <EM> (mouais, c'est pas si mal)

Je continue en poussant mes tests un tout petit peu plus avec du texte gras italique qui passe à italique souligné puis je regarde ce que ça donne. Là, il faudrait que vous fassiez vous même cet essai avant de lire la suite sinon vous allez passer à côté de l'effet que qela a pu avoir sur moi.

J'attend

Ok, je donne la solution pour ceux qui n'ont pas compris:

• Quand on fait «gras italique qui passe à italique souligné»
• On obtient «<STRONG>gras <EM>italique qui passe à </EM></STRONG><EM>italique souligné</EM>»

Y'a pas à tortiller, on peut essayer toutes les combinaisons que l'on veut, commencer par le gras, revenir en modification pour ajouter de l'italique puis remplacer du gras par le souligné... Quoiqu'on fasse, l'extraordinaire logiciel qu'est Microsoft Internet Explorer réussi à tout les coups à produire du code html qui gère correctement le chevauchement des balises !

C'est tellement magnifique qu'il n'y a presque rien d'autre à expliquer. Et ça va me faciliter énormément la vie puisque pour obtenir du xhtml il suffira de :

• passer les balises générées en minuscule
• transformer les <BR> en <br>
• générer correctement le code xhtml relatif aux liens (ça c'est déjà le cas)
• étudier le cas de l'insertion d'images

L'insertion d'images

Une autre zone de test pour voir comment se comporte l'insertion d'image et surtout le code html qui en découle.

Insérer une image ici > <

Bouuuh! Ils le font exprès! C'est pas croyable! Le coup d'avant ils génèrent du code html qui gère le chevauchement aussi bien que du code xhtml mais avec des balises en majucule. Ce coup-ci ils génèrent des attributs en minuscules tout comme il faut pour du xhtml, mais ils ne mettent pas les apostrophes ou les guillemets autour des valeurs ! Et un «hspace=0», et un «align=baseline», et un «border=0» et même un «alt=taratata» quand on a le malheur de ne pas avoir saisi plusieurs mots comme légende de l'image !

Et comme si ça ne suffisait pas, quand je sélectionne l'image insérée, que je clique sur le bouton insérer une image pour modifier sa légende, que je valide (j'espère que vous avez pu suivre), ils m'achèvent ! Ils ont rajouté un superbe «style="WIDTH: 21px; HEIGHT: 20px"» que je leur avais rien demandé (au moins ils ont mis des guillemets cette fois-ci).

J'ai deux alternatives (ou une seule, je ne me souviens jamais) :

• me mettre aux expressions régulières pour dépatouiller tout ça
• faire ma propre boite de dialogue pour insérer une image :) :) :)

Replace

Donc, les images ça sera pour plus tard. Concentrons-nous sur les trucs simples comme mettre les balises en minuscules et remplacer les <BR> par des <br />.

Bouuuh! C'est la soirée! Déjà que le «replace» du javascript n'est pas facile à comprendre, voilà-ty pas qu'il n'agit qu'une seule fois. Le pire c'est que je le savais déjà mais que je me suis encore fait avoir !

Zen.

<div class="memoBar" style="{width:400px;}"> <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="ciHtml.gif" onclick="ShowXhtml('memoHtml3');" onmouseover="this.className='memoOver';" onmouseout="this.className='memoOut';" title="Afficher la source" /> </div> <span id="memoHtml3" contentEditable="true" class="memoText" style="{width:400px; height:60px;}"> </span> <script language="VbScript" type="text/vbscript"> <!-- Sub ShowXhtml (ByVal sMemoId) Dim sHtml sHtml = document.all(sMemoId).innerHTML sHtml = Replace(sHtml, "<STRONG>", "<strong>", 1, -1, 1) sHtml = Replace(sHtml, "</STRONG>", "</strong>", 1, -1, 1) sHtml = Replace(sHtml, "<EM>", "<em>", 1, -1, 1) sHtml = Replace(sHtml, "</EM>", "</em>", 1, -1, 1) sHtml = Replace(sHtml, "<U>", "<u>", 1, -1, 1) sHtml = Replace(sHtml, "</U>", "</u>", 1, -1, 1) sHtml = Replace(sHtml, "<P>", "<p>", 1, -1, 1) sHtml = Replace(sHtml, "</P>", "</p>", 1, -1, 1) sHtml = Replace(sHtml, "<BR>", "<br />", 1, -1, 1) MsgBox sHtml --> End Sub </script>

Ouf !

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

Conclusion

Je récapitule par précaution : on est le 17 décembre déjà le 18 décembre et il me reste (au minimum) à :

• refaire une boite de dialogue d'insertion d'une image
• pouvoir modifier un lien une fois généré
• empécher d'éditer le reste de la page (même si certains trouvent ça rigolo)
• tester tout ça

J'y arriverai jamais avant les vacances...

Publicités