TinyMCE: upload immagini (e documenti)

Se avete seguito la guida a TinyMCE scritta qualche giorno fa e avrete provato ad usare il tool di gestione di immagini, documenti e links in versione full, avrete notato (anche dai commenti ricevuti nella mia stessa guida) che viene sollevato un errore di tipo

Callback function: fileBrowserCallBack could not be found.

o ancora viene aperta solo una popup come la seguente

Si ha quindi una una certa difficoltà a capire come caricare le immagini sul server per poterle aggiungere all’interno dell’editor.

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 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.

Sto pensando di poter creare un mio plugin per l’upload di documenti in PHP (e magari anche in ASP visto che è ora il linguaggio che uso di più per lavoro e metterlo online a disposizione di tutti, che dite?!
Però dovete darmi un po’ di tempo per sviluppare il tutto!!!