Accueil du site > Internet > Web 2.0 > CKeditor : la nouvelle version de FCKeditor (rédacteur invité)
CKeditor : la nouvelle version de FCKeditor (rédacteur invité)
mercredi 3 mars 2010, par
L’article qui va suivre a été rédigé par un rédacteur invité surnommé Pazu, webmaster du site animint.com depuis sa création en 1996 dont il a réalisé l’intégralité du codage. La partie blog de ce site comporte une rubrique webmastering où Pazu évoque les diverses évolutions de ses outils comme un agrégateur de flux (http://sama.animint.fr/) et son site kelmanga connecté au webservice Amazon (protocole REST) et sur lequel Pazu a mis au point un moteur automatique de recommandations couplé avec un système manuel.
Il existe plusieurs éditeurs visuels pour formater vos articles directement via des interfaces web, rendu populaires et indispensables pour les utilisateurs de plateformes de blog telles que Wordpress < http://www.wordpress-fr.net > ou Dotclear <http://fr.dotclear.org >. L’un des plus courants est Tinymce < http://tinymce.moxiecode.com/> même si d’autres projets - tel Wymeditor <http://www.wymeditor.org/> - qui pullulent en parallèle. Historiquement, un des éditeurs visuels en vogue a été FCKeditor et c’est que j’ai intégré à l’époque dans mon système de gestion de contenu pour le site Animint
Le code javascipt de FCKeditor est désuet et bien lourd. Le plus gênant est que plusieurs fonctionnalités sont devenues incompatibles avec les navigateurs actuels, notamment la mis en place des liens où les url se transforment en identifiants au cours de l’édition, ce qui vous laisse que l’option d’éditer la source pour les mettre. Du coup, il a fallu abandonner FCKeditor pour un autre éditeur visuel ou du moins pour une version plus récente.
La nouvelle version de FCKeditor a laissé tombé le F et s’appelle désormais CKeditor < http://ckeditor.com >, plus légère et dans la lignée de son illustre prédécesseur. Le code est plus rapide et moins gros. Du côté des fonctionnalités, rien de bien nouveau si ce n’est que par défaut, la gestion de fichiers et surtout l’upload d’images ne sont pas activé. Il existe en fait une extension payante CKFinder, qui répond à ce besoin et qui permet l’insertion d’image, sans avoir à transférer le fichier par un autre biais puis à faire le lien laborieusement à la main.
L’option CKFinder fait grincer des dents beaucoup d’anciens utilisateurs ou de nouveaux venus qui se désintéressent d’un éditeur visuel sans upload, tout en refusant de se payer une licence CKFinder pour avoir la fonction.
En fait, le système est ouvert et accepte n’importe quelle extension de code pour faire office de programme derrière pour gérer l’upload ou la navigation sur les fichiers. Il reprend une logique similaire à FCKeditor, où l’installation des connecteurs pour faire la même chose n’était pas évidente. En revanche, la documentation était disponible, ce qui fait encore défaut pour CKeditor mais la situation s’améliore avec le temps, la communauté écrivant de plus en plus de tutoriels à droite et à gauche.
Vous trouvez même des distributions complètes qu’il suffit d’installer et configurer dans votre environnement. Je pense à FileManager de Core Five Labs < http://labs.corefive.com/Projects/FileManager/ > et cet article de « Will » < http://www.asecondsystem.com/2010/01/19/integrating-a-file-browser-into-ckeditor-cakephp/> vous indique comment procéder pour l’intégrer dans un framework CakePHP <http://www.cakephp.org>.
Pourquoi ne pas avoir suivi cette démarche dans mon cas ?
1- La seule fonction que j’utilise en pratique est l’upload d’images et uniquement celle-là. Je ne me souviens pas d’avoir utilisé la navigation sur les fichiers, ayant de toute manière d’autres outils pour les gérer et je fais des liens vers d’autres adresses web et jamais vers des fichiers « attachés ». Installer, configurer et suivre les évolutions de toute une bibliothèque est un peu lourd par rapport à mon besoin.
2- Certaines parties du code actuel de Core Five Labs part du principe que les urls des fichiers uploadés sont une sous-partie du chemin de leur répertoire sur le disque. Du coup, cela ne colle pas dès que vous avez des alias. Il aurait fallu patcher le code par défaut et fouiner dedans, avec la problématique de rester compatible avec les versions à venir.
J’ai opté pour une option plus simple, qui se réduit à paramétrer les appels javascript de l’éditeur visuel et à un malheureux fichier upload.php dans un coin.
Un autre besoin basic est d’avoir une barre d’outils personnalisée dans l’éditeur visuel, histoire d’avoir les boutons utiles, genre le copier coller épuré depuis un texte word, sans encombrer l’écran avec la version complète. Inutile d’avoir un upload Flash quand vous n’en mettez jamais dans vos articles.
Poursuivons par la mise en place des éléments en pratique, si vous souhaitez utiliser CKeditor, avec l’upload d’images, activé.
Le code ckeditor est à télécharger sur le site de l’éditeur < http://ckeditor.com >. Vous dézipper l’ensemble tel quel et placez le dans un répertoire de votre site web, accessible via les navigateurs. Dans le répertoire /ckeditor, à la racine de votre site web par exemple.
La page formulaire pour éditer votre article doit faire apparaitre le corps du texte dans un textarea. Vous composez l’ensemble comme si vous n’aviez aucun outil de formatage et que vous recevez les informations comme un champ rempli de tags HTML. Le seul impératif est de donner un id à votre champ textarea.
<textarea cols="80" id="editor_office2003" name="corps" rows="10">
{contenu_du_corps_de_votre_article}
</textarea>
La page formulaire doit contenir un appel à la bibliothèque de ckeditor. Il suffit d’appeler un seul fichier
<script language="javascript" type="text/javascript" src=" /ckeditor/ckeditor.js"></script>
Après, dans la même page, il faut aussi un code javascript pour lancer l’appel. Un événement windows.onload peut faire l’affaire.
Dans l’exemple ci-dessous, on appelle à la fois un fichier de configuration spécifique et on fait de la personnalisation à la volée.
<script type=”text/javascript”>
window.onload = function() {
CKEDITOR.config.customConfig = '/fckeditor/config_animint.js';
CKEDITOR.replace( 'editor_office2003',
{
skin : 'office2003',
toolbar: 'custom'
});
}
</script> La fonction ‘replace’ permet de lier l’éditeur visuel au textarea ‘editor_office2003’ avec des options de personnalisation. ‘office2003’ est un thème de présentation par défaut tandis que ‘custom’ est le nom de la barre d’outils personnalisée décrite dans le fichier de configuration ‘config_animint.js’.
Abordons ce fichier de configuration. Notez d’abord qu’il est différent de ‘config.js’ le fichier de configuration par défaut de CKeditor, situé dans le répertoire /ckeditor. Théoriquement, il suffit d’éditer ce fichier config.js mais en pratique, avec certains navigateurs, il est conseillé d’utiliser un fichier qui s’appelle carrément autrement, sinon vous allez vous acharner en vain, pour que vos modifications soient prises en compte par l’éditeur visuel.
Voici le contenu du fichier ‘config_animint.js’ :
CKEDITOR.editorConfig = function( config )
{
config.filebrowserUploadUrl = '/filemanager/upload.php';
config.toolbar = 'custom';
config.toolbar_custom =
[
['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord', 'SpellChecker', 'Scayt'],
['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','Table','HorizontalRule','SpecialChar','PageBreak'],
];
};La 1ère ligne utile définie l’url à appeler pour gérer l’upload de fichier. La seule présence de cette ligne permet de débloquer le bouton upload dans l’interface de CKeditor.
La ligne en dessous déclare une barre d’outils personnalisée ‘custom’ dont la composition est détaillée en dessus, en respectant la nomenclature. La documentation originale est suffisamment complète pour s’en sortir avec la personnalisation de la barre d’outils. Vous partez de la version complète et vous épurez. Les crochets et les virgules permettent d’associer ou de dissocier les boutons à l’écran. Il faut juste prendre garde à bien fermer les crochets et ne pas oublier d’apostrophes en route.
Après, la fonction d’upload est contenue dans un seul fichier php, ’upload.php’, dont le code peut être transposé en d’autre langages. La difficulté est de connaître les variables passées par CKeditor et la logique d’échange mais le mieux est de partir d’un modèle et de laisser faire le reste.
L’exemple est tiré de cet article < http://alfonsoml.blogspot.com/2009/... > mais complété avec quelques vérifications et la sauvegarde du fichier uploadé.
< ?php
// FICHIER d’EXEMPLE
// Rajouter votre logique de SECURITE
// valeur obligatoire qui permet de revenir à l’éditeur
$funcNum = $_GET['CKEditorFuncNum'] ;
// valeur optionnelles
$CKEditor = (isset($_GET['CKEditor']) ? $_GET['CKEditor'] : “”;
$langCode = (isset($_GET['langCode']) ? $_GET['langCode'] : “”;
// L’url de retour du fichier, une fois uploadé
// qui apparait ensuite dans la fenêtre de dialogue de l’éditeur
$url = '' ;
// Message de retour optionnel à afficher en cas d’erreur
$message = '';
// Encore une autre variable made in CKEditor: $_FILES['upload']
if (isset($_FILES['upload'])) {
// Il manque la logique de sécurité par rapport à la taille du fichier, ou l’accès utilisateur au fichier upload.php
// Pas de vérification, si le fichier existe déjà, etc.
// Pas de vérification pour voir si le répertoire est accessible en lecture/écriture
$file_name = $_FILES['upload']['name'];
// Chemin du fichier temporaire
$tmp_name = $_FILES['upload']['tmp_name'];
// Vérification basique de l’extension
$extension = pathinfo($file_name, PATHINFO_EXTENSION);
if (preg_match('/(gif|jpg|jpeg|png)/i', $extension))
{
// Le répertoire cible
$dir_to = '/data/repository/images/blog/';
// Quelques transformations sur le nom du fichier cible
// Mis en minuscule avec la date du jour
// exemple : illustration.jpg devient 20100302illustration.jpg
$file_date = date("Ymd");
$file_name = strtolower($file_name);
$file_name = $file_date . $file_name;
// On enregistre le fichier
move_uploaded_file($tmp_name, $dir_to . $file_name);
// Notez que l’url n’a pas forcément la même tête que le répertoire physique
$url = '/blog/image/' . $file_name;
}
else
{
$message = 'Wrong extension file: ' . $extension;
}
}
else
{
$message = 'No file has been sent';
}
/*
La sortie prend en compte qu’upload.php a été appelé dans une iframe. D’où l’appel à la fenêtre parent avec la function de retour
*/
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
?>Le fichier upload.php suffit à transférer une image, du moment que les droits d’écriture du répertoire cible sont adéquats et que vous ne dépasser pas les limites de taille d’upload. Après, pour une utilisation en production, il vous reste à compléter les parapets de sécurité, surtout si la fonction est accessible par n’importe quel utilisateur.
RSS 2.0
2 Messages de forum