Piste :
Wiki: Plan du site - Derniers changements - Back link
Différences ¶
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédente | Prochaine révisionLes deux révisions suivantes | ||
tutoriel:yuieditor [2008/03/04 02:36] – bastnic | tutoriel:yuieditor [2008/03/04 02:36] – bastnic | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Intégration d'YUI Editor ====== | ||
- | |||
- | **CE TUTORIEL EST ENCORE EN CHANTIER** | ||
- | |||
- | Nous apprendrons ici comment intégrer l' | ||
- | |||
- | Pour faciliter l' | ||
- | |||
- | Ce tutoriel n'est pas destiné à décrire le " | ||
- | |||
- | Il indique aussi comment permettre l' | ||
- | |||
- | Enfin, ce tutoriel est basé sur les tutoriels [[tutoriels: | ||
- | |||
- | |||
- | ===== 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/ | ||
- | |||
- | <code bash> | ||
- | 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: | ||
- | |||
- | <code ini> | ||
- | startModule = " | ||
- | startAction = " | ||
- | [urlengine] | ||
- | engine | ||
- | multiview | ||
- | </ | ||
- | |||
- | |||
- | |||
- | ===== Installation d'YUI Editor ===== | ||
- | |||
- | L' | ||
- | |||
- | Pour une utilisation plus avancée, il est de bon goût d' | ||
- | |||
- | Il va tout de même falloir écrire quelques lignes de javascript à la main pour appeler l' | ||
- | Ajoutez-y maintenant le répertoire destiné à accueillir YUI EDitor : **yuieditor** | ||
- | |||
- | Si vous avez choisi de le faire, décompressez l' | ||
- | * js/ | ||
- | * http:// | ||
- | |||
- | |||
- | |||
- | ===== Création du plugin de template ===== | ||
- | |||
- | Dans le répertoire **/ | ||
- | |||
- | Copiez-collez le code suivant : | ||
- | <code php> | ||
- | <?php | ||
- | |||
- | /** | ||
- | * cfunction plugin : init a yui editor environnement | ||
- | * | ||
- | * @param jTplCompiler $compiler | ||
- | */ | ||
- | function jtpl_cfunction_html_yuieditor($compiler, | ||
- | |||
- | // on génère du code php qui sera intégré dans le template compilé | ||
- | $codesource = '$rep = $GLOBALS[\' | ||
- | if($rep!=null) { | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | $rep-> | ||
- | } '; | ||
- | |||
- | $compiler-> | ||
- | } | ||
- | ?> | ||
- | </ | ||
- | |||
- | Cette fonction charge le code Javascript d'YUI Editor. La configuration se trouvera dans le dernier fichier appelé **js/ | ||
- | |||
- | <code javascript> | ||
- | YAHOO.util.Event.on(window, | ||
- | |||
- | var myEditor = new YAHOO.widget.Editor(' | ||
- | height: ' | ||
- | width: ' | ||
- | dompath: false, | ||
- | animate: true, | ||
- | }); | ||
- | |||
- | yuiImgUploader(myEditor, | ||
- | |||
- | myEditor.render(); | ||
- | |||
- | // Make sure the HTML is placed in the textarea element | ||
- | YAHOO.util.Event.on(' | ||
- | myEditor.saveHTML(); | ||
- | }); | ||
- | |||
- | }); | ||
- | </ | ||
- | |||
- | Récupérez aussi dans ce dossier le script [[http:// | ||
- | |||
- | Pour en savoir plus sur les templates lisez l' | ||
- | |||
- | |||
- | ===== Appel d'YUI Editor ===== | ||
- | Rien de plus simple ! | ||
- | Il suffit désormais d' | ||
- | | ||
- | |||
- | 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 **/ | ||
- | <code php> | ||
- | < | ||
- | |||
- | {yuieditor} | ||
- | |||
- | <form action=" | ||
- | {formurlparam ' | ||
- | <div> | ||
- | < | ||
- | <input type = " | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | Le texte par défaut est contenu entre les balises de l' | ||
- | < | ||
- | |||
- | |||
- | ===== Modification de l' | ||
- | Ouvrez le fichier **/ | ||
- | |||
- | Ajouter le code suivant après la ligne $rep = $this-> | ||
- | <code php> | ||
- | $rep-> | ||
- | $rep-> | ||
- | </ | ||
- | |||
- | ===== Voir le résultat !===== | ||
- | Dans la barre d' | ||
- | http:// | ||
- | |||
- | Dans un template : | ||
- | {jurl ' | ||
- | |||
- | |||
- | |||
- | |||
- | ---- | ||
- | * [[tutoriels: | ||