Intégration du formulaire d'upload CKFinder à l'éditeur CKEditor

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Dans les tutoriels précédents concernant la création d'un site dynamique, nous avons évoqué la création d'un formulaire d'upload d'images pour pallier au manque de l'éditeur CKEditor qui ne le propose pas en natif. Aujourd'hui, je viens de m'apercevoir qu'il existait un "plugin" nommé ckfinder qui permet d'intégrer un formulaire d'upload directement à CKEditor. Nous allons donc voir comment intégrer ce dernier rapidement et facilement pour disposer d'un jolie formulaire d'upload et virer tout le code (si vous l'aviez mis en place) de mon précédent tutoriel concernant ce même sujet.
Il est à noter que le logiciel CKFinder que nous allons utiliser dans ce tutoriel est une version de "teste" qui est donc brider sur certaines fonctions car l'éditeur le propose sous condition d'achat d'une licence. Néanmoins et dans sa version "teste", le formulaire d'upload fonctionne parfaitement et en plus il créé des miniatures automatiquement ...alors pourquoi s'en priver  .

Mise en place de CKFinder avec CKEditor

Dans un premier, téléchargez le programme sur http://ckfinder.com/download (version PHP). Dezipez-le et si besoin renommer le dossier en " ckfinder " (attention, un seul niveau de dossier, c'est à dire que lorsque vous ouvrez le dossier " ckfinder ", vous avez directement accès aux autres fichiers et dossiers!).

Ouvrez le fichier " config.php " et cherchez les lignes :
function CheckAuthentication()
{
	// WARNING : DO NOT simply return "true". By doing so, you are allowing
	// "anyone" to upload and list the files in your server. You must implement
	// some kind of session validation here. Even something very simple as...
 
	// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
 
	// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
	// user logs in your system. To be able to use session variables don't
	// forget to add session_start() at the top of this file.
 
	return false;
}
Remplacez par :
session_start();
function CheckAuthentication()
{
	if($_SESSION['IsAuthorized'] == 1)
	{
		return true;
	}
	else
	{
		return false;
	}
}
Cette fonction permet de tester l'existence de la variable de session $_SESSION['IsAuthorized'] que nous allons créer un peut plus loin et ceci dans le but d'éviter les intrusions dans le formulaire d'upload.
Enregistrez le tout et envoyez le dossier ckfinder à la racine de votre site.

Et après ?

Nous intervenons ensuite dans la page nommé "ajouter-page.php" du dossier "admin".

Si vous avez implanter le formulaire d'upload suite au tutoriel sur le : "Formulaire d'upload d'images", supprimez tout ce qui est en rapport avec ce dernier. Ce qui revient en gros à avoir une page correspondant au tutoriel sur la : "Création de la page pour la rédaction des articles" .

Tout en haut du fichier et avant le DOCTYPE, ajoutez le code suivant : 
<?php 
session_start(); 
$_SESSION['IsAuthorized']=true; 
?>
Cherchez la ligne :
<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>
Remplacez par :
<script type="text/javascript">
 CKEDITOR.replace( 'contenu',
 {
 filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
 filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
 filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
 filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload
&type=Files&currentFolder=/archive/'
, filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=
QuickUpload&type=Images&currentFolder=/cars/'
, filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=
QuickUpload&type=Flash'
} ); </script>
Enregistrez le fichier et effectuez la même modification dans le fichier " modifier-article.php ". Si vous souhaitez disposer du formulaire d'upload sur la gestion de la page d'accueil, libre à vous d'effectuer les mêmes modifications dans le fichier " admin-index.php " N'oubliez pas non plus de supprimer le code du fichier fonctions.php.

Une fois que tout est mis en ligne, cliquez sur le bouton "image" de l'interface de CKEditor pour avoir accès à la fenêtre ci-dessous.

Formulaire permettant d'explorer le serveur

Cliquez sur "Explorer le serveur" pour avoir accès à l'interface d'upload.

Interface de CKFinder pour la gestion des images

Pour les mordus de PHP, vous pouvez également effectuer cette intégration en php en prenant soins de pointer vers les bons répertoires :
<?php
include_once '../ckeditor/ckeditor.php';
include_once '../ckfinder/ckfinder.php';
$ckeditor = new CKEditor();
$ckeditor->basePath = '/ckeditor/';
CKFinder::SetupCKEditor($ckeditor, '/ckfinder/');
$ckeditor->editor('contenu');
?>
Voir/déposer un commentaire (56) | Signaler un problème