Configuration dans PluXML pour intégrer KCFinder à CKEditor

Transcription

Configuration dans PluXML pour intégrer KCFinder à CKEditor
Configuration dans PluXML pour intégrer KCFinder à CKEditor
Site de KCFinder : http://kcfinder.sunhater.com - Démos de KCFinder avec CKEditor : http://kcfinder.sunhater.com/demos/ckeditor
+ voir l'article en français : http://www.naturewebment.com/dotclear2/sites/index.php?post/2010/08/30/Une-alternative-libre-%C3%A0-CKfinder-%3A-KCfinder-!
+ exemple d'intégration de KCEditor avec CKEditor (pour Artiphp 5, pas pour PluXML) : http://www.artiloo.com/phpBB2/viewtopic.php?t=10101
- Placer le dossier kcfinder au même niveau que le sous-dossier ckeditor, dans le dossier plugins/ckeditor.
1a) Editer ckeditor.php (dans le dossier plugins/ckeditor) pour remplacer ckfinder par kcfinder :
[ce fichier contient une autre modification : un test qui permet de ne pas lancer CKEditor lorsqu'il s'agit d'éditer un fichier du thème ou un message]
// Link dialog, "Browse Server" button
filebrowserBrowseUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=files',
// Image dialog, "Browse Server" button
filebrowserImageBrowseUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=images',
// Flash dialog, "Browse Server" button
filebrowserFlashBrowseUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=flash',
// Upload tab in the Link dialog
filebrowserUploadUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=files',
// Upload tab in the Image dialog
filebrowserImageUploadUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=images',
// Upload tab in the Flash dialog
filebrowserFlashUploadUrl : '<?php echo PLX_PLUGINS ?>ckeditor/kcfinder/browse.php?type=flash',
Attention : dans type=images et type=flash, écrire images et flash tout en minuscules (pour l'instant, le nom des dossiers est
obligatoirement celui des types de fichiers).
1b) Toujours dans ckeditor.php (dans le dossier plugins/ckeditor), changer les fonctions qui remplacent les adresses absolues en
relatives (pour l'écriture des fichiers) et relatives en absolues (nécessaire pour l'affichage des images dans CKEditor) :
/**
* Méthode qui convertit les liens absolus en liens relatifs pour les images et les documents
*
* @return
stdio
* @authors
Stephane F - Francis
**/
public function plxAdminEditArticle() {
echo "<?php \$tab_path_images = parse_url(\$this->racine . \$this->aConf['images']); \$abs_path_images =
\$tab_path_images['path']; ?>";
echo "<?php \$rel_path_images = \$this->aConf['images']; ?>";
echo "<?php \$tab_path_docs = parse_url(\$this->racine . \$this->aConf['documents']); \$abs_path_docs =
\$tab_path_docs['path']; ?>";
echo "<?php \$rel_path_docs = \$this->aConf['documents']; ?>";
echo
echo
echo
echo
"<?php
"<?php
"<?php
"<?php
\$chapo =
\$content
\$chapo =
\$content
str_replace(\$abs_path_images, \$rel_path_images, \$chapo); ?>";
= str_replace(\$abs_path_images, \$rel_path_images, \$content); ?>";
str_replace(\$abs_path_docs, \$rel_path_docs, \$chapo); ?>";
= str_replace(\$abs_path_docs, \$rel_path_docs, \$content); ?>";
}
/**
* Méthode qui convertit les liens relatifs en liens absolus pour les images et les documents (nécessaire pour
voir les images dans CKEditor)
*
* @authors Stephane F - Francis
**/
public function AdminArticleTop() {
echo "<?php \$tab_path_images = parse_url(\$plxAdmin->racine . \$plxAdmin->aConf['images']);
\$abs_path_images = \$tab_path_images['path']; ?>";
echo "<?php \$rel_path_images = \$plxAdmin->aConf['images']; ?>";
echo "<?php \$tab_path_docs = parse_url(\$plxAdmin->racine . \$plxAdmin->aConf['documents']);
\$abs_path_docs = \$tab_path_docs['path']; ?>";
echo "<?php \$rel_path_docs = \$plxAdmin->aConf['documents']; ?>";
echo
echo
echo
echo
}
"<?php
"<?php
"<?php
"<?php
\$chapo =
\$content
\$chapo =
\$content
str_replace(\$rel_path_images, \$abs_path_images, \$chapo); ?>";
= str_replace(\$rel_path_images, \$abs_path_images, \$content); ?>";
str_replace(\$rel_path_docs, \$abs_path_docs, \$chapo); ?>";
= str_replace(\$rel_path_docs, \$abs_path_docs, \$content); ?>";
2) Dans kcfinder/config.php, écrire le chemin relatif vers le dossier data (avec le slash à la fin) :
'uploadURL' => "../../../data/",
'uploadDir' => "../../../data/",
Autre idée, mais qui ne marche pas bien : écrire le chemin absolu vers le dossier data (dossier data inclus, avec le slash à la fin), comme :
'uploadURL' => "http://www.mon_site_pluxml.com/data/", (et idem pour 'uploadDir')
dans ce cas, l'une URL étant absolue, on peut laisser la fonction de remplacement URL absolue-relative qui sert à l'appel et au retour de CKEditor
associé au module propriétaire et payant CKFinder.
Parfois, ça a marché et d'autres fois non - à voir pourquoi (une fenêtre indique qu'il n'a pas de droits d'accès au dossier "racine_de_l_adresse/data/")
si on arrivait à le faire marcher, ce serait encore mieux avec une variable comme PluXML comme $plxMotor->racine . "data/" ou du genre
(avec $plxAdmin->aConf['images'] . '../' ?)
$plxMotor->racine . $variable_dossier_parent_de_data
3) ATTENTION : KCFinder est en mode sécurité par défaut, il faut l'enlever dans le fichier kcfinder/config.php en écrivant :
'disabled' => false,
- Le fichier ckeditor/ckeditor/config.js pourrait aussi être modifié, mais cela semble inutile.
Améliorations dans KCFinder
a) Modification du fichier kcfinder/js/browser/files.js, pour que le titre entier s'affiche dans une bulle, au passage de la souris sur l'image et sur le
nom du fichier : ajout d'un attribut title pour ces deux éléments.
Modification de la 2e et la 3e ligne ici :
html += '<div class="file">' +
'<div class="thumb" style="background-image:url(\'' + icon + '\')" title="' + _.htmlData(file.name) + '"></div>' +
'<div class="name" title="' + _.htmlData(file.name) + '">' + _.htmlData(file.name) + '</div>' +
b) Pour afficher par défaut la date et la taille de chaque image, modifier le fichier kcfinder/js/browser/settings.js : changer le 'off' en 'on' sur la 3ème
ligne après le if ici :
if (!_.kuki.isSet('showname')) {
_.kuki.set('showname', 'on');
$.each(shows, function (i, val) {
if (val != "name") _.kuki.set('show' + val, 'on'); // modified from 'off' to 'on'
});
}
------ TESTS ----Modification chemins absolus => relatifs : elle permet bien d'avoir des adresses relatives d'images dans les fichiers.
Upload d'image testé : ça marche
Problème pour l'insertion d'un fichier Flash :
KCFinder ouvre le dossier data/flash, qui n'est pas accessible par le menu "Médias" de PluXML. Il faudrait rediriger l'exploration des
fichiers Flash vers le dossier "data/images" (ou que ce dossier "data/flash" puisse être accessible dans le menu Médias).
Pour l'instant, le nom du dossier est obligatoirement celui du type de fichiers (images, flash, ...), mais le concepteur de KCFinder
réfléchit à un paramétrage de ces noms de dossiers.
Ce problème est évoqué sur le forum de KCFinder : http://sourceforge.net/apps/phpbb/kcfinder/viewtopic.php?f=3&t=247
Problème des images à fond transparent :
Pour les images GIF et PNG avec transparence, KCFinder crée et affiche des vignettes jpg (même si l'extension initiale est conservé,
c'est du jpg) avec un fond noir (la transparence progressive conservée pour les PNG, mais elle est fondue avec le noir - l'image originale n'est pas
affectée, une fois insérée dans la page, mais si c'est la vignette qui est insérée, son fond reste noir). [le pb existe aussi avec CKFinder pour les gif,
mais pas pour les png]
Il se peut que ça se passe dans le fichier kcfinder/lib/class_gd.php, ou/et dans kcfinder/core/uploader.php car les méthodes
imageResize et makeThumb n'utilisent que gd->imagejpeg quelle que soit l'extension du fichier d'origine.
Peut-être pourrait-on utiliser la fonction PluXML plxUtils::makeThumb ?

Documents pareils