Récupérer le contenu du Dojo Editor

Voyons comment récupérer le contenu du Dojo Editor dans un champ caché d’un formulaire afin de l’envoyer au serveur.

J’adore le Dojo Toolkit que j’utilise et préconise pour les applications métiers écrites en PHP. Ce qui me plaît est que tout est rassemblé dans un même package (Editeur RichText, gestion des formulaires, graphiques, tables de données, etc.) et qu’il n’est pas nécessaire de fouiller et tester différents plugins comme c’est le cas avec JQuery. Les deux frameworks ne sont pas à considérer comme concurrents, il y a même certains sites ou applications qui chargent les deux (un peu lourd, mais pourquoi pas).

Bref, pour revenir à nos moutons, je souhaitais utiliser l’éditeur de Dojo et pas un truc plus lourd genre TinyMCE ou CKEditor (ils sont tous les deux très bien, mais trop riches pour mon application). Afin de ne pas saloper la page web, Dojo Editor se charge dans une DIV. Et si vous l’avez inclus dans une TEXTAREA, le framework la transformera en DIV. Ce qui nous pose problème si l’on souhaite récupérer le contenu de l’éditeur après le POST d’un formulaire.

Il faut donc copier le contenu de l’éditeur dans un champ caché avec le petit bout de code Javascript ci-dessous. Ne vous inquiétez pas, l’évènement onChange n’est pas déclenché à chaque touche de clavier, mais après perte de focus sur le Dojo Editor et si le contenu a été modifié. Par exemple, il sera déclenché juste avant l’envoi d’un formulaire si on clique sur le bouton Submit.

<script type="text/JavaScript">
     dojo.require("dojox.html.entities");
     dojo.require("dijit.form.Form");
     dojo.require("dijit.Editor");
     dojo.require("dojox.editor.plugins.PrettyPrint");
     dojo.require("dojox.editor.plugins.NormalizeIndentOutdent");
     dojo.require("dojox.editor.plugins.TextColor");

dojo.addOnLoad(function() {
    var editor = dijit.byId("exemple_editor");
    dojo.connect(editor, "onChange", this, function(event) {
      dojo.byId("exemple").value = editor.get("value");
    });
});
</script>
<input type="hidden" id="exemple" name="exemple" value="<?php echo $value;?>">
<div style="width:500px;min-height:400px;"
 data-dojo-type="dijit.Editor"
 id="exemple_editor"
 data-dojo-props="extraPlugins:['prettyprint','normalizeindentoutdent','foreColor','hiliteColor']">
<?php echo $value;?>
</div>

Pour information, je fais beaucoup de Dojo dans le cadre d’une application que je suis en train de retaper. Il s’agit d’une application de gestion des cas de test (Test Case Manager) disponible sous sourceforge. Vous y verrez d’autres exemples de Dojo dans la pratique.