Intégrer FCKeditor dans CakePHP

FCKeditor est un outil très puissant qui transforme un simple textarea en éditeur de texte complet de style Word. Voyons comment automatiser son intégration dans un projet CakePHP via un Helper.

1. Installation

Commençons par télécharger la dernière version de FCKeditor et décompressons l’archive dans un nouveau répertoire : {app}/js/fckeditor/.

2. Fichier de configuration

Nous conseillons au lecteur de ne pas toucher au fichier de configuration de l’outil fourni dans l’archive, fckconfig.js, mais d’en créer un nouveau dans {app}/js/fckeditor/app_config.js. Cela nous fera gagner du temps lors de la mise à jour de l’éditeur qui écrasera le fichier par défaut. Voici un exemple de configuration :

// {app}/js/fckeditor/app_config.js
// Aspect de l'éditeur
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;
 
// Langue de l'interface
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage    = 'fr' ;
 
// Caractères spéciaux
FCKConfig.IncludeLatinEntities = false ;
 
// Boutons actifs
FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','Print'],
	['Cut','Copy','Paste','PasteText','PasteWord'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','SpecialChar'],
	['TextColor','BGColor'],
	'/',
	['Style','FontFormat','FontName','FontSize']
] ;

3. Le Helper Fck

Voyons sans plus tarder le Helper Fck qui va permettre d’automatiser l’intégration de l’éditeur dans un formulaire :

<?php
// {app}/views/helpers/fck.php
class FckHelper extends AppHelper
{
	var $helpers = array('Javascript');
 
	/**
	 * Inclusion de la librairie FCKeditor entre <head>...</head>
	 */
	function beforeRender()
	{ 
		$this->Javascript->link('fckeditor/fckeditor', false);
	}
 
	 /**
	  * Remplace un textarea par FCKeditor
	  *
	  * @param string $fieldname Nom du textarea ('Model.field' ou 'field')
	  * @param array $options Options :
	  * 				- width : int, largeur en pixels
	  * 				- height : int, hauteur en pixels
	  * 				- config_file : fichier de configuration de FCK
	  * 				- toolbar : liste des boutons actifs. Cette liste doit
	  * 				se trouver dans le fichier de configuration par défaut
	  * 				ou dans le fichier de configuration $config_file
	  * @return string Bloc de javascript qui va charger FCK
	  */
	 function replace($fieldname, $options = array())
	 {
	 	$options = array_merge(
	 		array(
				'width'       => 800,
				'height'      => 600,
				'config_file' => 'app_config.js',
				'toolbar'     => 'Default',
			),
		 	$options
	 	);
 
		$basePath = $this->webroot(JS_URL . 'fckeditor/');
 
	 	$config_file = false;
 
	 	if(!empty($options['config_file']))
	 	{
			$config_file = $basePath . $options['config_file'];
	 	}
 
	 	if(strpos($fieldname, '.') === false)
	 	{
			$fieldname = $this->model() . '.' . $fieldname;
	 	}
 
	 	$field = '';
 
	 	foreach(explode('.', $fieldname) as $val)
	 	{
			$field .= Inflector::camelize($val);
	 	}
 
		$script  = "fckLoader_$field = function () {" . "\n";
		$script .= "\t" . "var bFCKeditor_$field = new FCKeditor('$field');" . "\n";
		$script .= "\t" . "bFCKeditor_$field.BasePath = '{$basePath}';" . "\n";
 
		if($config_file)
		{
			$script .= "\t" . "bFCKeditor_$field.Config['CustomConfigurationsPath'] = '{$config_file}';" . "\n";
		}
 
		$script .= "\t" . "bFCKeditor_$field.ToolbarSet = '{$options['toolbar']}';" . "\n";
		$script .= "\t" . "bFCKeditor_$field.Width = {$options['width']};" . "\n";
		$script .= "\t" . "bFCKeditor_$field.Height = {$options['height']};" . "\n";
		$script .= "\t" . "bFCKeditor_$field.ReplaceTextarea();" . "\n";
		$script .= "}" . "\n";
		$script .= "fckLoader_$field();";
 
		return $this->Javascript->codeBlock($script);
	}
}
 
?>

Il ne comporte que deux méthodes :

  • La méthode beforeRender() sera appelée automatiquement par CakePHP avant le rendu de la page et permet d’inclure la librairie nécessaire au bon fonctionnement de l’éditeur ;
  • la méthode replace() qui prend en paramètre le nom du textarea à remplacer par l’éditeur, ainsi qu’un éventuel tableau d’options.

4. Utilisation dans une Vue

4.1 Inclusion du Helper

N’oublions pas de faire appel à notre Helper Fck dans le Contrôleur :

// {app}/controllers/exemples_controller.php
class ExemplesController extends AppController
{
	var $helpers = array('Fck');
 
	function edit() ...
}

4.2 Un formulaire

Il ne nous reste qu’à voir comment remplacer un textarea par FCKeditor dans une Vue :

// {app}/views/exemples/edit.ctp
<?php echo $form->create('Exemple', array('action' => 'edit')); ?> 
<?php echo $form->input('id'); ?> 
<fieldset>
	<legend>Description</legend>
	<?php echo $form->textarea('description'); ?> 
	<?php echo $fck->replace('description', array('width' => 640, 'height' => 480)); ?> 
</fieldset>
<?php echo $form->end('Valider'); ?>

Et voilà, notre textarea a disparu au profit d’un éditeur complet aux fonctionnalités de mise en forme avancées.

Pierre-Emmanuel Fringant

Articles connexes

Commentaires

[...] Intégrer FCKeditor dans CakePHP [...]

Léo Renaud-Allaire
29 janvier 2009 à 5:24

Merci pour le tuto! Très facile à utiliser, il manquerait peut-être seulement une petite note afin d’expliquer comment changer les CSS de l’éditeur pour utiliser les CSS du site web. J’ai du fouiller un peu!

Pierre-Emmanuel Fringant
29 janvier 2009 à 8:32

Cela concerne Fck en lui-même, pas son intégration avec CakePHP, je n’ai donc rien dit là dessus. Mais il faut évidemment bien lire la doc de Fck avant de l’utiliser !

avairet
6 février 2009 à 15:26

Très bon tuto, comme d’habitude ;o)

Cependant, tu as privilégié l’approche « full JS » pour l’implémentation Fck, alors qu’on peut aussi privilégier l’approche PHP via la classe fournie dans le package.

Nous avons fait un Helper au boulot pour ce type d’utilisation. Je te l’enverrai si tu veux. La seule chose que nous n’avons pas fait c’est le « replace » d’un textarea, si bien que notre version serait pénalisée par une désactivation de javascript, mais elle était destinée à du back-office essentiellement, donc il nous était possible de forcer l’utilisation de js.

moon
16 février 2009 à 10:03

Bonjour, très bon tutorial. Néanmoins une peite remarque sur les tuto en general: Je pense qu’un tutorial deverait nous apprendre le pourquoi du comment, c’est à dire nous expliquer pourquoi on met cette ligne du code, a quoi ca sert, qu’est ce que ca ferai, … Il faut rappeler que c’est un site qui est dédié pour la formation donc par consequent on est des débutant. je ne rend pas dutout en cause ce que vous faite, je trouve que c’est un trvail super, et respect! mais ca aurait été bien d’expliquer ce que vous faites, l’important c’est de comprendre ce qui tourne deriere , pas juste avoir une recette, car voila apres avoir lu votre tuto, cert j’ai un fck editor sur mes pages mais je ne sais pas pourquoi cela marche et surtout comment ! Donc je dois chercher ailleur pour esperer trouver une solution.

Concernant le message de Léo Renaud-Allaire: Ca aurait été mieux de nous expliquer comment il a fait concernant la customisation du CSS, au lieu juste de remarquer que pierre ne l’a pas fait !

Merci en tout cas de ce travail. En esperant de prochains tuto.

Pierre-Emmanuel Fringant
16 février 2009 à 13:12

J’essaie en général de commencer mes articles par une petite mise en situation, certes souvent sommaire mais qui permet néanmoins de comprendre le contexte dans lequel s’inscrit la suite de l’article… Dans le cas présent, je suis parti du principe que le lecteur est arrivé sur cet article parce qu’il cherchait comment intégrer FckEditor dans son appli CakePHP, et pas qu’il cherchait un éditeur de texte enrichi en général.

moon
16 février 2009 à 14:17

Effectivement le probleme que j’ai soulevé concerne plus ce tuto, les autres sont assez bien expliqué. Pour etre plus clair, le soucis s’est posé pour ce tuto et celui du site multimingue. D’ailleur j’ai laissé des commentaires. Merci en tout cas pour ton travail. Tu nous aide enormement. J’espere que tu continura a nous former !

Elianora la blanche
20 février 2009 à 16:59

Salut !

j’ai mon appli en local dans un sous dossier de la racine de mon serveur web, j’ai réussi à m’en dépatouiller pour cake, mais fckeditor se charge dans une sorte de frame et ne trouve pas ses petits (il cherche dans /js/fckeditor/ alors que les sources sont en fait dans //js/fckeditor/) comment pourrais-je lui faire comprendre cette subtilité ? (en prod ça marche sans souci :) )

Pierre-Emmanuel Fringant
21 février 2009 à 12:42

Excellente remarque ! J’ai modifié le Helper pour que l’on puisse effectivement faire fonctionner Fck lorsque l’appli n’est pas à la racine du serveur. Teste la modif de ton côté, et dis moi si cela fonctionne chez toi.

Elianora la blanche
23 février 2009 à 8:57

Merci, j’ai fait la modif du helper, et ça fonctionne !

Ca va être plus simple pour tester ^^

Siegburg Christophe
25 mars 2009 à 9:36

Bonjour à tous,

je viens de tester se tuto chez moi, mais cela ne fonctionne pas.

vu que cakephp 1_2 a déjà un fichier « js » dans « webroot », c’est la que j’ai installer fckeditor et fais toutes les opérations qui sont décrites dans se tuto.

Mais au moment du visuel, il me dit qu’il ne trouve pas de « jsController »

Auriez-vous une solution?

j’ai déjà demandé l’aide sur le forum http://forum.cakephp-fr.org/viewtopic.php?id=416, mais personne n’a pu trouver d’où venait le problème

Merci d’avance pour vos réponses

Pierre MARTIN
5 mai 2009 à 10:21

Bonjour,

Le Helper a des problèmes de fonctionnement avec les champs contenant un « underscore » dans leur nom (ex : detail_article).

Afin de résoudre ce bug, il suffit de remplacer la ligne « $field .= ucfirst($val); » du helper par « $field .= Inflector::camelize($val); »

Pierre

Pierre-Emmanuel Fringant
5 mai 2009 à 11:21

Merci Pierre, c’est corrigé !

Zaibon
14 mai 2009 à 0:38

Bonjour

Je viens d’essayer de mettre en place Fckeditor mais malheureusement cela ne fonctionne pas.

J’ai pourtant suivi exactement le tuto. Je n’ai pas de message d’erreur mais mon textarea n’est pas changé en FCKeditor.

Dans le code source de la page, il n’y a pas de lien vers la librairie FCKeditor, pourtant j’ai bien 

function beforeRender()
{ 
    $this->Javascript->link('fckeditor/fckeditor', false);
}

Où est le problème ?

Mon dossier FCKeditor est dans l’arborescence: app/webroot/js/FCKeditor

Mais cela ne change rien, si ?

Pierre-Emmanuel Fringant
15 mai 2009 à 11:39

Tu as bien la ligne suivante quelque part entre <head> et </head> dans ton layout ? 

echo $scripts<em>for</em>layout;
Zaibon
18 mai 2009 à 0:20

Nikel avec cet ligne en plus cela fonctionne très bien…. Merci du coup de main

Almaju
15 juin 2009 à 22:24

Excellent ! Merci beaucoup pour cette aide :D !

Christophe Willemsen
6 août 2009 à 17:33

Bonjour,

Merci pour ce tuto et le helper. Cependant en se basant sur votre tuto le fichier de configuration app_config.js n’est pas pris en compte chez moi en local.

J’ai du modifier manuellement le fichier fckconfig.js et rajouter le path du fichier de config perso à la ligne 27 (FCKConfig.CustomConfigurationsPath.

Bien à vous

Thecanea
20 août 2009 à 9:47

Super tuto !

Fonctionne parfaitement,

Et merci pour les comment’s, notamment pour l’ajout du fichier perso de config…

Bonne continuation !

Thec :D

VERINAUD Nicolas
14 septembre 2009 à 11:23

Ce helper pour Fck contient une petite erreur qui fait planter l’utilisation du component Email de CakePHP.

Dans le helper {app}/views/helpers/fck.php

Il suffit de vider la fonction beforeRender comme ceci :

/**
     * Inclusion de la librairie FCKeditor entre ...
     */
    function beforeRender() {
    }

Et de déplacer son contenu dans la fonction replace comme cela : 

function replace($fieldname, $options = array()) {
                $this->Javascript->link('fckeditor/fckeditor', false);
        $options = array_merge(
Zaibon
2 octobre 2009 à 14:57

J’ai essayé de mettre en place la nouvelle version de Fckeditor, qui s’appelle maintenant Ckeditor. Mais je Bloque a la fonction replace() je ne comprend pas comment faire. j’ai donc copier la fonction donée dans le tuto mais il me dit Undefined index: toolbar [APP/views/helpers/cke.php, line 50]

Nailehk
4 octobre 2009 à 11:43

Idem, j’ai des difficultés à intégrer la nouvelle version Ckeditor à mon application. Serait-il possible de nous donner quelques explications ?

Merci pour tout le travail déjà accompli =)

VERINAUD Nicolas
5 octobre 2009 à 14:47

CKeditor est différent de FCKeditor, il faut repenser tout le helper pour pouvoir utiliser CK…

Majdi
19 janvier 2010 à 10:53

J’ai suivis ce tutoriel de a —> z :( même avec les commentaires et j’ai tout testé mais ca ne fonctionne pas , je crois que c’est a cause du lien javascipt dans la partie head du layout: 

echo $scripts_for_layout;
… mais j’ai tout essayé sans résultat :( . j’ai une petite proposition pour formation-cakephp pourquoi ne pas mettre des sources téléchargeables ?
Linkin
23 février 2010 à 14:55

J’ai testé le tuto et j’ai malheureusement un erreur à la fin… lorsque je combine Fck avec le formulaire d’envoi d’e-mail ca me donne l’erreur suivante :

Fatal error: Call to a member function addScript() on a non-object in \cake\libs\view\helpers\javascript.php on line 294

Participez

Pour insérer une portion de code, utilisez <pre lang="php">...</pre>