| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes |
| tutoriel:yuieditor [2008/03/04 02:34] – bastnic | fr:tutoriels:yuieditor [2008/12/08 22:07] – modification externe 127.0.0.1 |
|---|
| ====== Intégration d'YUI Editor ====== | ====== 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. | Nous apprendrons ici comment intégrer l'éditeur javascript [[http://developer.yahoo.com/yui/editor/|YUI Editor]] dans Jelix. |
| Il indique aussi comment permettre l'upload d'image directement depuis l'éditeur. (étape un brin plus compliquée) | 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 [[tutoriels:fckeditor|Intégration de FCKeditor]] et [[tutoriels:tinymce|Intégration de TinyMCE]]. | Enfin, ce tutoriel est basé sur les tutoriels [[fr:tutoriels:fckeditor|Intégration de FCKeditor]] et [[fr:tutoriels:tinymce|Intégration de TinyMCE]]. |
| |
| |
| |
| |
| ===== Installation de TinyMCE ===== | |
| | ===== 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. | 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. |
| 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. | 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 [[manuel:templates|"Le moteur de template jTpl"]] et sa section "Les plugins de templates". | Pour en savoir plus sur les templates lisez l'article [[fr:manuel-1.0:templates|"Le moteur de template jTpl"]] et sa section "Les plugins de templates". |
| |
| |
| Le texte par défaut est contenu entre les balises de l'élément **textarea** : | Le texte par défaut est contenu entre les balises de l'élément **textarea** : |
| <textarea>...</textarea>. | <textarea>...</textarea>. |
| | |
| |
| |
| Ajouter le code suivant après la ligne $rep = $this->getResponse('html'); | Ajouter le code suivant après la ligne $rep = $this->getResponse('html'); |
| <code php> | <code php> |
| $rep->bodyTpl = 'demo_tinymce'; | $rep->bodyTpl = 'demo_yuieditor'; |
| $rep->body->assign('monTexte', "BONJOUR, et vive Jelix !"); | $rep->body->assign('monTexte', "BONJOUR, et vive Jelix !"); |
| </code> | </code> |
| |
| ---- | ---- |
| * [[tutoriels:|Retour au sommaire des tutoriels]] | * [[fr:tutoriels:|Retour au sommaire des tutoriels]] |
| |
