Zone de saisie HTML

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 :

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="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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 :