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 | Dernière révisionLes deux révisions suivantes | ||
tutoriel:yuieditor [2008/03/04 02:36] – bastnic | fr:tutoriels:yuieditor [2008/12/08 22:07] – modification externe 127.0.0.1 | ||
---|---|---|---|
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 [[fr: | ||
+ | |||
+ | |||
+ | ===== 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 ' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | * [[fr: | ||