Home / Programmazione / Javascript - AJAX / Integrare CKEditor e CKFinder
Mattepuffo

Integrare CKEditor e CKFinder

Integrare CKEditor e CKFinder

CKEditor e CKFinder sono due tools scritti in AJAX molto usati nei blog.

Il primo è un editor HTML che viene usato per inserire posto in un db usando un'interfaccia user frindly.

Il secondo invece è un file manager.

Con CKEditor è possibile anche inserire immaggini dentro a un articolo; il problema però è che di default la salva dentro al db, e non è una buona cosa.

La cosa migliore è integrarlo con CKFinder per salvare l'immagine su disco e poi richiamarla tramite codice HTML.

Per prima cosa scompattate i due archivi in una directory; la situazione dovrebbe essere tipo questa:

/root_del_sito/lib/ckfinder

/root_del_sito/lib/ckeditor

Poi richiamiamo le librerie nell'head della pagina:

<script type="text/javascript" src="lib/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="lib/ckfinder/ckfinder.js"></script>

Il passo seguente è installare CKEditor e richiamare CKFinder:

 

<textarea cols="" rows="" id="testo_articolo" name="testo">
</textarea>
<script type="text/javascript">
CKEDITOR.replace(
'testo_articolo',
{
// varie opzioni di CKEditor
filebrowserBrowseUrl       : 'lib/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'lib/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'lib/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl       : 'lib/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'lib/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'lib/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
}
);
</script>

Abbiamo la nostra textarea; subito sotto abbiamo uno script JS che richiama CKEditor in modo da riampiazzare la semplice textarea.

Questo basta per usare CKEditor (per ulteriori opzioni guardate la documentazione e gli esempi che stanno nella directory scaricata).

Subito sotto abbiamo varie righe che richiamano CKFinder e le varie opzioni.

A questo punto non ci rimane che modificare il file di configurazione (config.php) di CKFinder per fare l'upload delle foto:

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 true;
}

Enjoy!