CE TUTORIEL EST ENCORE EN CHANTIER
Nous apprendrons ici comment intégrer l'éditeur javascript YUI Editor dans Jelix.
Pour faciliter l'intégration tout le code sera fourni.
Ce tutoriel n'est pas destiné à décrire le “comment configurer YUI Editor”. Pour obtenir ces informations je vous recommande de consulter la documentation de YUI Editor.
Il indique aussi comment permettre l'upload d'image directement depuis l'éditeur. (étape un brin plus compliquée)
Enfin, ce tutoriel est basé sur les tutoriels Intégration de FCKeditor et Intégration de TinyMCE.
Vous devez avoir fait le Mini Tutoriel et le Tutoriel principal et/ou être à l'aise avec Jelix.
Dans un premier temps on crée une application et un module.
Après vous être positionné dans le répertoire lib/jelix-scripts/ vous devez créer une nouvelle application nommée tutoriel.yuieditor et un module nommé essai en utilisant les commandes :
php jelix.php --tutoriel.yuieditor createapp -nodefaultmodule
php jelix.php --tutoriel.yuieditor createmodule essai
Votre fichier de configuration defaultconfig.ini.php devrait avoir les valeurs suivantes:
startModule = "essai" startAction = "default:index" [urlengine] engine = simple multiview = off
L'éditeur WYSIWYG YUI Editor ne repose que sur des fichiers Javascript. Dans la documentation officielle de l'éditeur, le code à insérer dans les fichiers templates appellent directement les fichiers sur les serveurs de Yahoo. Pour de simples tests, je vous recommande d'utiliser ces liens.
Pour une utilisation plus avancée, il est de bon goût d'alléger la charge des serveurs de Yahoo en téléchargeant les fichiers en question. Inconvénient ? l'archive contient un très grand nombre de fichiers et il faut soit même faire le tri. A ne faire donc que si vous l'adoptez définitivement.
Il va tout de même falloir écrire quelques lignes de javascript à la main pour appeler l'éditeur. Dans votre application, créez un répertoire contenant l'ensemble des bibliothèques Javascript histoire d'être ordonné ! Nommez-le js et ajoutez-le dans le répertoire /tutoriel.yuieditor/www/. Ajoutez-y maintenant le répertoire destiné à accueillir YUI EDitor : yuieditor
Si vous avez choisi de le faire, décompressez l'archive et recherchez le répertoire contenant les sources Javascript. Pour la version 2.5.0 il s'agit du dossier dist. Pour la rédaction de ce tutoriel le chemin est donc l'une des deux solutions :
Dans le répertoire /tutoriel.yuieditor/plugins/tpl/html créez un fichier nommé cfunction.yuieditor.php .
Copiez-collez le code suivant :
<?php /** * cfunction plugin : init a yui editor environnement * * @param jTplCompiler $compiler */ function jtpl_cfunction_html_yuieditor($compiler, $params=array()) { // on génère du code php qui sera intégré dans le template compilé $codesource = '$rep = $GLOBALS[\'gJCoord\']->response; if($rep!=null) { $rep->addCSSLink(\'http://yui.yahooapis.com/2.5.0/build/assets/skins/sam/skin.css\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/container/container_core-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/menu/menu-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/button/button-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/editor/editor-beta-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/dragdrop/dragdrop-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/container/container-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js\'); $rep->addJSLink(\'http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js\'); $rep->addJSLink(\'js/yui-image-uploader.js\'); $rep->addJSLink(\'js/yuieditor.js\'); $rep->bodyTagAttributes = array (\'class\'=>\'yui-skin-sam\'); } '; $compiler->addMetaContent($codesource); } ?>
Cette fonction charge le code Javascript d'YUI Editor. La configuration se trouvera dans le dernier fichier appelé js/yuieditor/yuieditor.js qui n'existe pas encore. Créez le.
YAHOO.util.Event.on(window, 'load', function(e) { var myEditor = new YAHOO.widget.Editor('full_editor', { height: '200px', width: '505px', dompath: false, animate: true, }); yuiImgUploader(myEditor, '[JURL A SAISIR]','image'); myEditor.render(); // Make sure the HTML is placed in the textarea element YAHOO.util.Event.on('submit_form', 'click', function(e) { myEditor.saveHTML(); }); });
Récupérez aussi dans ce dossier le script image uploader d'allmybrain.com pour pouvoir par la suite uploader des images.
Pour en savoir plus sur les templates lisez l'article "Le moteur de template jTpl" et sa section “Les plugins de templates”.
Rien de plus simple ! Il suffit désormais d'ajouter la ligne de code suivante dans un template : {yuieditor}
Le comportement par défaut de YUI Editor tel que configuré plus haut dans ce tutoriel consiste à remplacer les éléments HTML textarea par un éditeur de texte.
Créez un template demo_yuieditor.tpl dans /tutoriel.yuieditor/modules/essai/templates/
<h1>Intégration d'YUI Editor</h1> {yuieditor} <form action="{formurl 'essai~default:index'}" method="POST"> {formurlparam 'essai~default:index'} <div> <textarea name="mon_texte" id="mon_texte" cols="50" rows="15">{$monTexte|eschtml}</textarea><br/> <input type = "submit" value="Valider" /> </div> </form>
Le texte par défaut est contenu entre les balises de l'élément textarea : <textarea>…</textarea>.
Ouvrez le fichier /tutoriel.yuieditor/plugins/modules/essai/controllers/default.classic.php
Ajouter le code suivant après la ligne $rep = $this→getResponse('html');
$rep->bodyTpl = 'demo_yuieditor'; $rep->body->assign('monTexte', "BONJOUR, et vive Jelix !");
Dans la barre d'adresse :
http://localhost/jelix/tutoriel.yuieditor/www/index.php?module=essai&action=default:index
Dans un template :
{jurl 'essai~default:index'}