====== Intégration d'YUI Editor ======

**CE TUTORIEL EST ENCORE EN CHANTIER**

Nous apprendrons ici comment intégrer l'éditeur javascript [[http://developer.yahoo.com/yui/editor/|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 [[http://developer.yahoo.com/yui/editor/|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 [[fr:tutoriels:fckeditor|Intégration de FCKeditor]] et [[fr:tutoriels:tinymce|Intégration de TinyMCE]].


===== Pré-requis =====
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 :

<code bash>
  php jelix.php --tutoriel.yuieditor createapp -nodefaultmodule
  php jelix.php --tutoriel.yuieditor createmodule essai
</code>
Votre fichier de configuration defaultconfig.ini.php devrait avoir les valeurs suivantes:

<code ini>
  startModule = "essai"
  startAction = "default:index"
  [urlengine]
    engine        = simple
    multiview     = off
</code>



===== Installation d'YUI Editor =====

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 [[http://developer.yahoo.com/yui/download/|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 :
    * js/yuieditor/build/mondossier/monfichier.js
    * http://yui.yahooapis.com/2.5.0/build/mondossier/monfichier.js



===== Création du plugin de template =====

Dans le répertoire **/tutoriel.yuieditor/plugins/tpl/html** créez un fichier nommé **cfunction.yuieditor.php** .

Copiez-collez le code suivant :
<code php>
<?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);
}
?>
</code>

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.

<code javascript>
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();
    });

});
</code>

Récupérez aussi dans ce dossier le script [[http://allmybrain.com/wp-content/uploads/2007/10/yui-image-uploader.js|image uploader]] d'[[http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/|allmybrain.com]] pour pouvoir par la suite uploader des images.

Pour en savoir plus sur les templates lisez l'article [[http://docs.jelix.org/fr/manuel-1.0/templates|"Le moteur de template jTpl"]] et sa section "Les plugins de templates".


===== Appel d'YUI Editor =====
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/**
<code php>
  <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>

</code>

Le texte par défaut est contenu entre les balises de l'élément **textarea** :
 <textarea>...</textarea>.



===== Modification de l'action par défaut (le controleur) =====
Ouvrez le fichier **/tutoriel.yuieditor/plugins/modules/essai/controllers/default.classic.php**

Ajouter le code suivant après la ligne $rep = $this->getResponse('html');
<code php>
  $rep->bodyTpl = 'demo_yuieditor';  
  $rep->body->assign('monTexte', "BONJOUR, et vive Jelix !");
</code>

===== Voir le résultat !=====
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'}




----
   * [[fr:tutoriels:|Retour au sommaire des tutoriels]]