Intégrer CKeditor dans CakePHP

Descendant de FCKeditor, CKeditor est un puissant éditeur WYSIWYG. Nous allons créer un Assistant ou Helper pour transformer facilement un simple champ de type textarea en éditeur de texte complet, ainsi que le gestionnaire d’images et de fichier multimédia associé, CKfinder. Nous allons aussi voir comment il est possible de restreindre l’accès aux fonctionnalités de CKfinder aux utilisateurs authentifiés uniquement.

1. Installation

Commençons par télécharger CKeditor. Nous récupérons une archive que nous décompressons dans le dossier js de notre application. Nous faisons de même pour CKfinder (version PHP), pour obtenir au final l’arborescence suivante :

_ app
  |_ webroot
      |_ js
          |_ ckeditor
          |_ ckfinder

2. Configuration de CKeditor

Nous créons ensuite un fichier de configuration spécifique à l’application, que nous nommons naturellement app.config.js à l’intérieur du répertoire ckeditor. Ceci n’est qu’un exemple, à charge du lecteur de se documenter sur toutes les options disponibles :

CKEDITOR.editorConfig = function(config)
{
	config.language = 'fr';
	config.entities_latin = false;
	config.width = 640;
	config.height = 320;
	config.toolbar_App =
	[
	    ['Source','-','Save','Preview','-','About'],
	    ['Cut','Copy','Paste','-','Print'],
	    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	    '/',
	    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Link','Unlink','Anchor'],
	    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
	    '/',
	    ['Styles','Format','Font','FontSize'],
	    ['TextColor','BGColor'],
	    ['Maximize', 'ShowBlocks']
	];
	config.toolbar = 'App';
};

3. L’Assistant CkHelper

Voyons maintenant le code de l’Assistant lui-même, que nous recopions dans un nouveau fichier {app}/views/helpers/ck.php :

<?php
class CkHelper extends AppHelper
{
	var $helpers = array('Html', 'Javascript');
 
	function replace($fieldName, $options = array())
	{
		$defaults = array(
 			'customConfig' => '/js/ckeditor/app.config.js',
 			'loadFinder' => true
 		);
 
		$options = array_merge($defaults, $options);
 
	 	$fieldId = $this->domId($fieldName);
 
	 	$loadFinder = $options['loadFinder'];
 
	 	unset($options['loadFinder']);
 
		$script = "\tvar ck_$fieldId = CKEDITOR.replace('$fieldId', {$this->Javascript->object($options)});";
 
		if($loadFinder)
		{
			$script .= "\n\tCKFinder.SetupCKEditor(ck_$fieldId, '/js/ckfinder/');";
		}
 
		return $this->Html->scriptBlock($script);
	}
}
?>

Le code n’est pas très compliqué, l’unique méthode replace() accepte deux arguments :

• le nom d’un champ de formulaire que nous souhaitons remplacer par CKeditor, typiquement un textarea ;
• un tableau de paramètres dont deux sont remplis par défaut : le chemin vers notre fichier de configuration globale créé plus haut, et un booléen pour charger le gestionnaire d’images CKfinder. Ce tableau d’options peut permettre de prendre la main sur les variables de configuration du fichier app.config.js si besoin.

4. Utilisation de l’Assistant

Comme n’importe quel Helper, nous devons appeler le nôtre dans un Contrôleur (ou dans l’AppController si tous les contrôleurs doivent l’utiliser) :

class ArticlesController extends AppController
{
	var $helpers = array('Ck');
}

Voyons maintenant une vue de ce contrôleur, dans laquelle nous allons appeler les fichiers javascript nécessaires au bon fonctionnement de CKeditor et CKfinder, et créer un textarea pour le remplacer par l’éditeur :

<?php
// {app}/views/articles/admin_add.ctp
$this->set('title_for_layout', "Ajouter un article");
 
// Appel des fichiers javascript nécessaires
echo $this->Html->script('ckeditor/ckeditor', array('inline' => false));
echo $this->Html->script('ckfinder/ckfinder', array('inline' => false));
?>
 
<?php echo $this->Form->create('Article'); ?> 
 
<fieldset>
	<legend>Nouvel article</legend>
	<?php echo $this->Form->input('title', array('label' => "Titre :")); ?> 
</fieldset>
 
<fieldset>
	<legend>Contenu</legend>
	<?php echo $this->Form->textarea('description'); ?> 
	<?php echo $this->Ck->replace('description'); ?> 
</fieldset>
 
<?php echo $this->Form->end("Valider"); ?>

L’appel des deux fichiers javascript requis ne sera effectif que si nous ajoutons echo $scripts_for_layout quelque part dans le header HTML de notre layout.

Voilà, nous obtenons un puissant éditeur HTML pour enrichir facilement le texte de l’article.

5. Configuration de CKfinder

Nous devons maintenant configurer CKfinder pour qu’il sache où stocker les images et les fichiers multimédias, par exemple le dossier {app}/webroot/files. Nous ouvrons le fichier {app}/webroot/js/ckfinder/config.php et modifions la ligne suivante :

$baseUrl = '/ckfinder/userfiles/';

En :

$baseUrl = '/files/';

Nous prenons garde que le dossier files existe bien et que les droits d’accès sont suffisants (chmod 755).

6. Restriction du CKfinder aux utilisateurs logués

Nous souhaitons que l’accès au gestionnaire multimédia soit tout à fait interdit aux utilisateurs non authentifiés. CKfinder demande d’ailleurs que l’on implémente la méthode CheckAuthentication() qui retourne false par défaut, interdisant tout accès à quiconque, authentifié ou pas. Nous allons donc implémenter cette méthode en retournant false sauf si le composant Auth a bien renseigné la session, prouvant par là que l’utilisateur est logué. Attention, CakePHP utilise un nom de session différent du nom par défaut de PHP, il faut penser à le définir en tout premier lieu, avant d’appeler session_start().

Nous modifions donc le tout début du fichier config.php comme suit :

session_name('CAKEPHP');
session_start();
 
/**
 * This function must check the user session to be sure that he/she is
 * authorized to upload and access files in the File Browser.
 *
 * @return boolean
 */
function CheckAuthentication()
{
	return !empty($_SESSION['Auth']['User']);
}

Cette fois nous pouvons accèder au gestionnaire d’images en cliquant sur l’icône correspondante dans CKeditor.

Pierre-Emmanuel Fringant