Integrare AjaXplorer in CKEditor

Avendo sviluppato il CMS per l'azienda dove lavoro, avevo anche la necessità di gestire le pagine e i loro contenuti con un editor WYSIWYG. Inizialmente scelsi, TinyMCE, ma dopo qualche tempo me ne pentii, perché all'epoca non funzionava così bene sui vari browser ed il codice che produceva era a dire poco orribile. Scelsi poi, quindi CKEditor. Scelta che trovai ottima, e mi trovai tra le mani un gioiellino che mi permetteva di fare tutto quello che volevo, con un interfaccia grafica bella, elegante e leggera. Inoltre, mi permetteva in maniera decisamente facile, di attivare e disattivare l'editor a piacimento, col click su un bottone, e di inserire una determinata stringa nel punto desiderato di un testo. Mi accorsi poi che mi mancava una funzione essenziale. Ovvero un gestore di file per scegliere e caricare file (immagini per esempio) per inserirli nel testo. Navigando su internet trovai AjaXplorer. Che devo dire la verità trovo strepitoso. Per interfaccia, per capacità, per il supporto multi-browser...
Cercai e ricercai su internet una maniera per integrare questi due strumenti e farli lavorare insieme. Beh, inizialmente fu un po' una rogna, bisognava aprire vari file ed applicarvi delle modifiche. A livello di php, parlo. Ultimamente, con le ultime release, invece, è diventato tutto estremamente facile, e con poche righe nel file di configurazione javascript di CKEditor è possibile fare questa "magia".



Entriamo nello specifico.

Nella cartella di CKEditor, dovete trovare un file chiamato config.js. Apritelo con un qualsiasi editor di testo. Dovreste trovare un qualcosa del genere.

CKEDITOR.editorConfig = function( config )
{

};

Per l'integrazione, vi basterà inserire queste tre righe:

config.filebrowserBrowseUrl = 'path_to_ajaxplorer/?external_selector_type=ckeditor&relative_path=your_website_url_encoded';
config.filebrowserImageBrowseUrl = 'path_to_ajaxplorer/?external_selector_type=ckeditor&relative_path=your_website_url_encoded';
config.filebrowserFlashBrowseUrl = 'path_to_ajaxplorer/?external_selector_type=ckeditor&relative_path=your_website_url_encoded';

Di queste righe path_to_ajaxplorer rappresenta la posizione dov'è installato AjaXplorer stesso, può essere anche un percorso relativo e non per forza assoluto come per esempio: /include/ajaxplorer. L'altro parametro ovvero your_website_url_encoded rappresenta l'indirizzo del vostro sito, questo perché quando andremo a scegliere un immagine in AjaXplorer da inserire nel nostro contenuto su CKEditor, se lasciassimo il parametro vuoto, la nostra immagine verrà inserita con l'url relativo e non completo, per esempio:  
/immagini/immagine.jpg 
invece che
http://www.nostrosito.com/immagini/immagine.jpg.
Per ovviare questo problema ci basterà inserire il nostro sito in maniera codificata, cioè così:
http://www.nostrosito.com
diventa
http%3A%2F%2Fwww.nostrosito.com.

Qui potete trovare una tabella di riferimento per codificare gli URL: http://www.w3schools.com/tags/ref_urlencode.asp
Mentre qui un codificatore che farà il lavoro sporco al posto nostro: http://meyerweb.com/eric/tools/dencoder/

Infine, dopo poche semplici code il nostro file config.js sarà qualcosa di simile a questo:

CKEDITOR.editorConfig = function( config )
{
    config.filebrowserBrowseUrl = '/include/ajaxplorer/?external_selector_type=ckeditor&relative_path=http%3A%2F%2Fwww.nostrosito.com';
        config.filebrowserImageBrowseUrl = '/include/ajaxplorer/?external_selector_type=ckeditor&relative_path=http%3A%2F%2Fwww.nostrosito.com';
        config.filebrowserFlashBrowseUrl = '/include/ajaxplorer/?external_selector_type=ckeditor&relative_path=http%3A%2F%2Fwww.nostrosito.com';
};

Ed il gioco è fatto, avremo quindi il nostro CKEditor, con Ajaxplorer perfettamente integrato. Senza più modifiche per fare doppio click per selezionare un file o altro... Solo 3 semplici righe. Et voilà!!