Zone de saisie HTML

Cette page a été rédigée il y a fort fort longtemps, et n'a pas tellement été mise à jour.

Vous savez, moi je ne crois pas qu'il y ait de bonne ou de mauvaise page. Moi, si je devais résumer mon wiki aujourd'hui avec vous, je dirais que c'est d'abord des rencontres. Des gens qui m'ont tendu la main, peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi. Et c'est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l'interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n'est pas mon cas, comme je disais là, puisque moi au contraire, j'ai pu ; et je dis merci au wiki, je lui dis merci, je chante le wiki, je danse le wiki... je ne suis qu'amour ! Et finalement, quand des gens me disent « Mais comment fais-tu pour avoir cette humanité ? », je leur réponds très simplement que c'est ce goût de l'amour, ce goût donc qui m'a poussé aujourd'hui à entreprendre une construction logicielle... mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi.

Comment ajouter une zone de texte avec mise en forme dans une JSP ?

Problème

Il faudrait pouvoir faire de la mise en forme du texte saisi dans une aire de texte (multilignes) avec (au minimum) les fonctions suivantes :

bold/italique/souligné,
bullet, énumération,
caractères spéciaux,
…

Solution

Cette fonction peut être intégrée sous la forme d’une balise (JSF) existante ou à développer. Il est possible aussi de personnaliser un textarea avec du javascript. Cette deuxième solution semble être la plus facile à mettre en oeuvre, car il existe plusieurs solutions prêtes à l’emploi.

Quelques pistes à étudier :

Apache Tomawhak inputHtml

Cette solution semble a priori la plus simple à intégrer dès lors qu’on utilise JSF. Il suffit d’intégrer la librairie Tomawahk et d’utiliser la balise h:inputHtml.

<%@ taglib uri="link:http://java.sun.com/jsf/html[http://java.sun.com/jsf/html]" prefix="h" %>
<%@ taglib uri="link:http://java.sun.com/jsf/core[http://java.sun.com/jsf/core]" prefix="f" %>
<%@ taglib uri="link:http://myfaces.apache.org/tomahawk[http://myfaces.apache.org/tomahawk]" prefix="t" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "link:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]">
<html xmlns="link:http://www.w3.org/1999/xhtml[http://www.w3.org/1999/xhtml]">
<head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <title>Exemple JSF avec Tomahawk</title>
</head>
<body>
  <f:view>
    <h:form id="main">
      <t:inputHtml id="text" value="{wysiwyg.htmlText}"></t:inputHtml>
      <h:commandButton value="OK" action="{wysiwyg.execute}"></h:commandButton>
    </h:form>
  </f:view>
</body>
</html>

Cela fonctionne, mais on atteind les premières limites dès qu’on veut intégrer 2 zones formattables dans la même page. La 2° ne sera qu’une simple zone textarea !

TinyMCE

TinyMCE est une solution à base de javascript qui peut être intégrée avec n’importe quelle technique de dévelopement serveur. Pour java, TinyMCE peut être utilisé avec n’importe quel framework (struts, JSF,…).

L’installation est simple, puisqu’il suffit de récupérer le répertoire tiny_mce dans l’archive zip ou tar.gz téléchargée, et de placer le répertoire dans notre application web (WebContent dans mon projet eclipse-wtp).

Ensuite, il suffit d’utiliser le script depuis les JSP ; l’initialisation se fait par un script synchrone en début de JSP :

<script language="javascript"
        type="text/javascript"
        src="tiny_mce/tiny_mce.js">
</script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple"
    });
</script>

Les options d’initialisation sont détaillées sur le site http://wiki.moxiecode.com/index.php/TinyMCE:Index. Puis chaque zone avec formattage est déclarée avec l’attribut mce_editable.

<textarea id="elm1" rows="10" cols="40" mce_editable="true"></textarea>

Ceci fonctionne lorsque la zone de texte est déclarée en HTML simple. Par contre, l’attribut mce_editable ne fonctionne pas avec JSF.

Dans JSF, il faut soit déclarer tous les textareas comme gérés par TinyMCE, soit déclarer explicitement la liste des zones (attention aux id !).

<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "exact",
        elements : "main:text",
        theme : "simple"
    });
</script>

Cette initialisation concernera uniquement la zone créée comme ceci :

<h:form id="main">
    <h:inputTextarea id="text" rows="10" cols="40" value="{wysiwyg.htmlText}"></h:inputTextarea>
    <h:commandButton value="OK" action="{wysiwyg.execute}"></h:commandButton>
</h:form>

Dojo Rich Text Editor

Dojo est une librairie javascript très populaire. Elle peut être utilisée avec tous les langages de programmation. Elle est progressivement intégrée à Tomawahk (sandbox, puis tomahawk 1.1.5).

L’intégration dans Tomawahk se fait par la balise d’initialisation.

 <t:dojoInitializer require="dojo.widget.Editor" />

Ensuite, l’éditeur HTML est un textarea auquel on applique un style spécifique dojo :

 <h:inputTextarea id="text" styleClass="dojo-Editor"
                  value="#{wysiwyg.htmlText}" />

Remarques :

Testé avec Tomawahk 1.1.5 snapshot (22/02/2007)
Génère des erreurs à l’initialisation
Semble difficile à personnaliser (dimensions, boutons)