Novembre 2014

GetSimple avec CKEditor, KCFinder et JWPlayer

GetSimple est un petit CMS sympathique qui permet de créer facilement un site Internet relativement simple mais pas nécessairement de taille réduite. Il est open source, très léger, n'utilise pas de base de données et son interface de gestion est conviviale. La possibilité d'annuler une action et de revenir en arrière est un de ses points forts.

GetSimple utilise par défaut l'éditeur CKEditor. L'intégration de KCFinder (open-source) va permettre de transférer des images ou des fichiers directement sur le serveur à partir de l'éditeur. L'ajout du plugin JWPlayer (open source) à CKEditor va permettre d'insérer facilement des vidéo Flash et des fichiers mp3 sur son site.

GetSimple CKEditor JWPlayer KCFinder

  • Le contenu de GetSimple est à la racine pour plus de facilité.
  • Le fichier de langue FR est à placer dans 'admin/lang'.
  • Le dossier kcfinder se place dans '/admin/template/js/', au même endroit que ckeditor. Supprimer le numéro de version du nom.
  • Trois skins sont disponibles dans le CKEditor téléchargeable indépendamment. Il suffit de récupérer le contenu du dossier 'skins' et de le placer dans '/admin/template/js/ckeditor/skins/'.
  • Le plugin jwplayer (uniquement le dossier, pas le fichier de config) se place dans '/admin/template/js/ckeditor/plugins/'.

Modifier les droits pour que l'ensemble soit accessible en ecriture pour tous ('groupe' et 'autre').

Les possibilités d'édition sont, par défaut, assez limitées, il faut donc augmenter le nombre de boutons. On bascule dans la langue de Voltaire. Comme on dispose de nouveaux skins, on bascule sur le 'V2'. On précise que le plugin jwplayer existe et enfin, on désigne KCFinder comme nouveau gestionnaire de fichier.

Tout ceci se déroule dans le fichier gsconfig.php à la racine (si c'est encore temp.gsconfig.php, lancer GetSimple dans la partie admin). L'éditer et modifier le code :

# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL',"['Source','-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat','SpellChecker','Scayt'], 
    '/', 
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], 
    ['TextColor','BGColor','-','Rule','PageBreak'], 
    ['NumberedList','BulletedList','-','Outdent','Indent'], 
    '/', 
    ['Blockquote','-','Smiley'],['Link','Unlink','Anchor'], 
    ['Templates','Image','jwplayer','Flash','Table','HorizontalRule','SpecialChar'], 
    '/', 
    ['Styles','Format','Font','FontSize'], 
    ['ShowBlocks'] 
    "); 
    
# WYSIWYG editor language (default en) 
define('GSEDITORLANG', 'fr');
 
# WYSIWYG Editor Options 
define('GSEDITOROPTIONS',"skin : 'v2',
extraPlugins:'jwplayer',
filebrowserBrowseUrl : 'template/js/kcfinder/browse.php', 
filebrowserImageBrowseUrl : 'template/js/kcfinder/browse.php?type=images', 
filebrowserFlashBrowseUrl : 'template/js/kcfinder/browse.php',
filebrowserUploadUrl : 'template/js/kcfinder/upload.php', 
filebrowserImageUploadUrl : 'template/js/kcfinder/upload.php?type=images', 
filebrowserFlashUploadUrl : 'template/js/kcfinder/upload.php',
toolbarCanCollapse : true 
");

Dans le dossier kcfinder, modifier le fichier config.php à deux endroits :

$_CONFIG = array(
 
'disabled' => false,
'denyZipDownload' => false,
'denyUpdateCheck' => false,
'denyExtensionRename' => false,
 
'theme' => "oxygen",
 
'uploadURL' => "/data/uploads",
// ou "/chemin-du-CMS-depuis-racine-web/data/uploads"
 
!!! ... et plus bas ... !!! (ne pas copier cette ligne)
 
// CKEditor & FCKEditor types
'files'   =>  "",
'flash'   =>  "swf flv mp3",
'images'  =>  "*img",

Enfin, dans '/admin/', ouvrir le fichier edit.php et bloquer les paramètres par défaut (qui écrasent les paramètres optionnels !?!) ; Ajouter // devant les deux lignes Url :

    <?php echo $EDOPTIONS; ?>,                   
    tabSpaces:10,
//  filebrowserBrowseUrl : 'filebrowser.php?type=all',
//  filebrowserImageBrowseUrl : 'filebrowser.php?type=images',
    filebrowserWindowWidth : '730',
    filebrowserWindowHeight : '500'
});

 

Voici la nouvelle barre de l'éditeur. Le bouton jwplayer est visible entre le bouton 'insérer une image' et le bouton flash.

Barre de CKEditor avec JWPlayer

Le gestionnaire de fichier KCFinder permet de visualiser les images sur le serveur, de les renommer et de les supprimer. Il permet également d'envoyer des fichiers sur le serveur.

KCFinder dans CKEditor