10 mars 2011

Utiliser CKeditor comme WYSIWYG dans Zend Framework

Billet technique concernant le développement de site web à l'aide de Zend Framework.






Lors du développement d'une application web comportant une zone d'administration, une problématique est récurrente : comment vais-je intégrer un éditeur graphique pour que le client puisse personnaliser ses textes ?




Dans cet article, je vous propose ma technique pour intégrer l'éditeur wysiwyg CKeditor au sein de votre application Zend Framework, en partant du principe que la structure des fichiers du site est celle proposée par Zend_Tool, en ajoutant une configuration fonctionnelle de ZendX_JQuery.


--------------------------------------------------------------------------------------------------------------------------
Définition de la structure du site :

--------------------------------------------------------------------------------------------------------------------------


  • sources du site


    • application


      • config


        • application.ini


      • layouts


        • ...


      • controllers


        • ...


      • views


        • ...


      • ...


      • Bootstrap.php
    • library
      • Application
      • Zend
        • ...
      • ZendX
        • ...
    • public
      • js
      • css
      • index.php


--------------------------------------------------------------------------------------------------------------------------
Fin de la définition de la structure du site

--------------------------------------------------------------------------------------------------------------------------
Les fichiers/dossiers en rouges sont ceux dans lesquels on va modifier des choses.

Premièrement, nous allons ajouter la référence permettant de charger automatiquement les dossiers et fichiers du dossier /library/Application, et pour cela il va falloir éditer le fichier /application/config/application.ini.

Toujours en considérant les fichiers générés par Zend_Tool, il va donc falloir ajouter la ligne suivante dans la catégorie production :





--------------------------------------------------------------------------------------------------------------------------

[production]
...
autoloaderNamespaces[] = "Application_"
...

--------------------------------------------------------------------------------------------------------------------------

Maintenant qu'on a chargé le répertoire dans l'include path, il ne nous reste plus qu'à les ajouter. Télécharger les fichiers et installez les dans le dossier /library/Application [Zip des fichiers].


--------------------------------------------------------------------------------------------------------------------------
Définition de la librairie :

--------------------------------------------------------------------------------------------------------------------------


  • sources du site
    • library
      • Application
        • JQuery
          • Form
            • Element
              • TextareaCKEditor.php
          • View
            • Helper
              • Ckeditor.php


--------------------------------------------------------------------------------------------------------------------------
Fin de la définition de la librairie

--------------------------------------------------------------------------------------------------------------------------

On a presque fini je vous rassure. On ajoute rapidement le dossier de CKEditor [Version modifiée fonctionnelle avec ce tutoriel] dans le dossier /public/js/

On fini le tutoriel en ajoutant les aides de vues dans l'include path pour que Zend les retrouve. Ça se passe dans le Bootstrap de l'application. Etant donné que vous avez déjà ZendX_JQuery de configuré, vous devez avoir une méthode _initView ou similaire dans laquelle vous avez la ligne suivante :


















--------------------------------------------------------------------------------------------------------------------------

$view->addHelperPath('AssoBoard/JQuery/View/Helper', 'AssoBoard_JQuery_View_Helper');

--------------------------------------------------------------------------------------------------------------------------

Ajoutez juste au dessus ou en dessous la ligne suivante :




































--------------------------------------------------------------------------------------------------------------------------




































$view->addHelperPath('Application/JQuery/View/Helper', 'Application_JQuery_View_Helper');




































--------------------------------------------------------------------------------------------------------------------------

Et voilà !


Je viens de lire aujourd'hui un article de Rob Allen sur les View Helpers dans Zend Framework, et il propose de les intégrer légèrement différemment. Au lieu de mettre la ligne précédente dans le Bootstrap, il propose d'ajouter la ligne suivante directement dans votre application.ini situé dans le dossier config.

--------------------------------------------------------------------------------------------------------------------------
resources.view.helperPath.Application_View_Helper_ "Application/View/Helper/"

--------------------------------------------------------------------------------------------------------------------------


Maintenant pour l'utiliser, il ne vous reste qu'à instancier un objet Application_JQuery_Form_Element_TextareaCKEditor et l'ajouter à un Zend_Form ou faire un $this->ckeditor() sur un objet vue.

Il est par ailleurs possible de passer des paramètres à une instance d'




































Application_JQuery_Form_Element_TextareaCKEditor en utilisant la méthode setJQueryParam($name, $value). Pour connaitre la liste des paramètres disponibles, rendez vous sur le site de CKEditor.





































La principale restriction actuelle de cet élément de formulaire est que le chemin vers la librairie est statique, et que le dossier ckeditor doit donc nécessairement se trouver dans /public/js/.