Christopher Henry

Ce tutoriel se base sur la version 2.9 de Contao.

Nous voilà partie dans un nouveau système de gestion de contenu nommé CONTAO (anciennement Typolight).

Pour ceux qui ne connaissent pas il s’agit d’un portail internet assez simple à utiliser, cependant il lui manque une partie importante concernant l’éditeur de texte tinyMCE : un explorateur de fichier.

À travers les lignes suivantes, je vais essayer de vous montrer comment intégrer ce super petit navigateur de fichier à tinyMCE.

Pour commencer téléchargez l’archive de KCFinder (kcfinder archive zip).

Il vous faut maintenant extraire le contenu de cette archive dans le répertoire : plugins/tinyMCE/plugins/kcfinder/

Le plus dur est fait, il ne nous reste plus qu’à configurer le tout.

Commençons dans l’ordre par KCFinder, dans le répertoire ouvrir le fichier « config.php » et modifier les lignes suivantes :

'uploadURL' => "upload",

par

'uploadURL' => "../../../../tl_files/",

'uploadDir' => "",

par

'uploadDir' => $_SERVER['DOCUMENT_ROOT']."/tl_files",

et enfin,

//'_tinyMCEPath' => "/tiny_mce",

par

'_tinyMCEPath' => "/plugins/tinyMCE/",

Les modification pour notre navigateur de fichier sont terminées, passons maintenant à la configuration de tinyMCE.

Trouvez les fichier : tinyMCE.php dans system/config et modifiez les lignes suivantes :

Ajoutez

file_browser_callback: 'openKCFinder',

après

tinyMCE.init({
mode : "exact",
height : "300",
language : "< ?php echo $this->language; ?>",
elements : "< ?php echo $this->rteFields; ?>",

et aussi

function openKCFinder(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: 'plugins/tinyMCE/plugins/kcfinder/browse.php?opener=tinymce&type=' + type + '&dir=' + type + '/public',
title: 'KCFinder',
width: 700,
height: 500,
resizable: "yes",
inline: true,
close_previous: "no",
popup_css: false
}, {
window: win,
input: field_name
});
return false;
}

sous la fin de la fonction précédente.

Vous pouvez faire la même chose dans les fichiers : tinyFlash.php et tinyNews.php.

Vous verrez apparaître maintenant une icône sur le bord de vos fenêtres d’insertion de documents et vous obtiendrez ainsi un joli explorateur de fichiers.