Una delle fondamentali mancanze dalla versione di base dell’editor TinyMCE è il tool di gestione di immagini, documenti e links. Se però avete provato TinyMCE attivando l’interfaccia avanzata, avrete notato che è presente un bottone di aggiunta delle immagini, bottone che però, nella versione “non modificata” dello script, come chiedeva Pino, solleva l’errore

Callback function: fileBrowserCallBack could not be found.

oppure apre una popup recitante “Example of filebrowser callback: field_name: src, url: , type: image“, esattamente come la seguente

Risultato della chiamata del fileBrowserCallBack

E allora, come è possibile caricare le immagini nella textarea di TinyMCE?

In seguito vedremo come integrare un caricatore di immagini (e documenti) attraverso l’uso di due plugin esterni e di uno script da noi realizzato.

MCFileManager e MCImageManager

Questi due componenti (con licenza commerciale di circa €30) possono essere utilizzati anche in versione stand-alone (da soli) senza quindi essere legati all’editor HTML WYSIWYG TinyMCE. L’integrazione di questi due componeneti è decisamente semplice, come mostrato dalle guide presenti nel wiki (Installazione di MCFileBrowser e Installazione di MCImageBrowser).

L’installazione prevede semplicemente di caricare i due prodotti nella cartella plug-in di TinyMCE (/tiny_mce/plugins/), aggiungerli alla direttiva dei plugin nella pagina come nel prossimo listato e configurare correttamente i file di configurazione dei due componenti (config.php) per selezionare e impostare le cartelle di destinazione dei files.

Integrazione
tinyMCE.init({ ...plugins : "imagemanager,filemanager"

});

Unica pecca di questi due splendidi componenti (che potete provare nella pagina di Moxiecode) è che sono a pagamento.

iBrowser

(Non funziona con la versione 3.0 di TinyMCE)

iBrowser è un software di “terze parti” prodotto da Jaeger Consulting, che pare però aver smesso di produrlo nell’ormai lontano 5 Agosto 2005. Questo prodotto funziona, da quanto letto nei post trovati per la rete, correttamente con TinyMCE fino alla versione 2.X. Ho deciso di non provarlo soprattutto visto che la versione 3.0 di TinyMCE è in Release Candidate e quindi quasi pronta a “sbarcare” sulle nostre piattaforme.

Se avete modo di provarlo, come ultima spiaggia o anche solo per diletto, fatemi sapere come lo avete trovato.

CustomFileBrowser

Lo chiamo così, con un nome che indica chiaramente che questo è il vostro file browser, unico e raro (un po’ come l’amaro Averna), creato da voi. Qui le cose si complicano un po’, ma vediamo di riuscire a fare funzionare correttamente tutto.

La funzione fileBrowserCallBack creata dagli sviluppatori di TinyMCE è un’interfaccia (chi ha studiato Java o un altro linguaggio di programmazione ad oggetti dovrebbe capire immediatamente di cosa sto parlando) su cui implementare la propria funzione.

Una funzione tipo (inserita nella pagina del form, tra i tag <script> di TinyMCE) potrebbe avere questa forma:

var URLdiRitorno = "";
var finestraBrowser;
var nomeCampoBrowser;
function fileBrowserCallBack( field_name, url, type, win ){
window.open('http://vostro_sito/upload.php',
'', 'width=600,height=400');finestraBrowser = win;
nomeCampoBrowser = field_name;
}

function ritornoBrowser(url) {
finestraBrowser.document.forms[0].elements[nomeCampoBrowser].value = url;
}

Essendo TinyMCE sviluppato in Javascript (linguaggio di programmazione lato client, ovvero il lato dell’utente) non possiede uno strumento di upload di documenti, capace di interagire lato server (server side). Andiamo così a caricare una pagina da voi creata, che convenzionamente ho chiamato upload.php, attraverso la funzione Javascript window.open: upload.php è una pagina che vi deve permettere di caricare i vostri file sul server (non necessariamente) e passarli successivamente alla finestra di TinyMCE.

Supponiamo che la vostra pagina popup creata ad hoc visualizzi le miniature delle immagini presenti in una determinata cartella del server: ogni immagine potrebbe essere linkata a TinyMCE via javascript con la chiamata a ritornoBrowser nel metodo onclick della stessa immagine.

Esempio:
<img src="image.jpg" onclick="opener.opener.ritornoBrowser('http://vostro_sito/image.jpg');" />

Se non avete mai avuto la possibilità di programmare in ASP o, meglio, in PHP diventa abbastanza complicato riuscire ad implementare una pagina di upload correttamente funzionante.