TinyMCE: integrare perfettamente Ajax File Manager

screenshot tinymce

TinyMCE: integrare perfettamente Ajax File Manager

TinyMCE, come molti sapranno, è un web editor WYSIWYG scritto in javascript che permette a chiunque di creare/editare pagine web senza conoscere l’HTML (una sorta di Word per il web).

Il tutto lato-client (in javascript appunto) senza programmare particolari script php che trasformano le stringhe di testo puro nelle entità HTML equivalenti (per esempio i caratteri accentati come le lettere “ò”,”à”,”è”…).

L’installazione e la personalizzazione è estremamente semplice, corredato da un wiki molto completo e pagine di esempi con tutte le possibile personalizzazioni dello script.

Si sa, però, che javscript è lato-client e non può essere utilizzato per effettuare upload su server se non tramite ajax o popup che hanno dietro pagine php programmate per effettuare tali uploads. Ciò rappresenta un problema se abbiamo la necessità di effettuare l’upload e il ridimensionamento di immagini ed inserirle all’interno dell’editor tinymce.

In giro ci sono alcuni plugin per tinymce che fanno questa cosa ma, purtroppo, molti sono a pagamento.

Risolviamo il problema utilizzando uno script open source di nome Ajax File Manager.

Tale script è a se stante e, di base, non vengono fornite spiegazione per integrarlo a TinyMCE, ma viene fornito solamente un pacchetto con TinyMCE e Ajax File Manager incluso.

Il problema del pacchetto è che viene fornito con TinyMCE v. 2.1.2 e Ajax File Manager v. 0.9. Domanda: come facciamo ad avere l’ultima versione di TinyMCE (3.08) e Ajax File Manager (1.0 RC 1)?

Ecco qui come integrare AFM 1.0 Rc1 nella versione 3.08 di TinyMCE.

Scarichiamo l’ultima versione di TinyMCE dalla pagina http://tinymce.moxiecode.com/download.php, scompattiamolo nella root-dir della nostra applicazione (per es. public_html/). Avremo così la cartella public_html/tiny_mce/.

Scarichiamo l’ultima versione di Ajax File manager dalla pagina http://www.phpletter.com/DOWNLOAD/ e scompattiamo il file nella cartella public_html/tiny_mce/plugins/. Avremo così la cartella public_html/tiny_mce/plugins/ajaxfilemanager/.

Per prima cosa impostiamo correttamente il file public_html/tiny_mce/plugins/ajaxfilemanager/inc/config.base.php con i giusti parametri (login, formato file, percorsi).

In particolare, i percorsi ipotizzando che il nostro dominio si chiami www.miodominio.it e le immagini le uploadderemo nella cartella public_html/img con chmod a 777 (avremo anche una cartella session in public_html/session con chmod a 777 per la cache):

/* ……… */
define(‘CONFIG_SYS_DEFAULT_PATH’, ‘../../../img/’);
define(‘CONFIG_SYS_ROOT_PATH’, ‘../../../img/’);
define(‘CONFIG_SYS_FOLDER_SHOWN_ON_TOP’, true);
define(“CONFIG_SYS_DIR_SESSION_PATH”, ‘../../../session/’);
/* ……… */
define(‘CONFIG_WEBSITE_DOCUMENT_ROOT’, ‘/home/utente/public_html/’);
/* ……… */

“Tutti” i percorsi devono avere il percorso relativo alla posizione public_html/tiny_mce/plugins/ajaxfilemanager/ .

Fatto questo possiamo impostare il nostro TinyMCE con le chiamate di callback dovute.

L’esempio di configurazione, di seguito, è standard: leggendo il codice possiamo personalizzarlo come vogliamo.

Nella pagina del form con un input testuale multilinea con l’ipotetico nome id=”input_txt” inseriamo nei tags <script></script> il seguente codice:

<script>
tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
plugins : “inlinepopups,advimage,media”,
theme_advanced_buttons1 : “bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,image,removeformat,anchor,blockquote,code”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
file_browser_callback : “ajaxfilemanager”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
width : “676″,
height : “300″,
extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]“,
apply_source_formatting : true,
relative_urls : false,
remove_script_host : false,
document_base_url : “<?=SITE_URL?>”,
languages : “it”,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
convert_newlines_to_brs : false,
force_br_newlines : false,
force_p_newlines : false
});
function ajaxfilemanager(field_name, url, type, win) {
var ajaxfilemanagerurl = “http://www.miodominio.it/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php”;
switch (type) {
case “image”:
ajaxfilemanagerurl += “?type=img”;
break;
case “media”:
ajaxfilemanagerurl += “?type=media”;
break;
case “flash”: //for older versions of tinymce
ajaxfilemanagerurl += “?type=media”;
break;
case “file”:
ajaxfilemanagerurl += “?type=files”;
break;
default:
return false;
}
var fileBrowserWindow = new Array();
fileBrowserWindow["file"] = ajaxfilemanagerurl;
fileBrowserWindow["title"] = “Ajax File Manager”;
fileBrowserWindow["width"] = “782″;
fileBrowserWindow["height"] = “440″;
fileBrowserWindow["resizable "] = “yes”;
fileBrowserWindow["inline"] = “yes”;
fileBrowserWindow["close_previous"] = “no”;
tinyMCE.activeEditor.windowManager.open(fileBrowserWindow, {
window : win,
input : field_name
});

return false;
}

</script>

Come potete vedere, abbiamo inserito nell’init di TinyMCE il richiamo alla funzione di callback file_browser_callback : “ajaxfilemanager” che fa riferimento alla funzione che abbiamo creato subito dopo.

Da notare che la variabile ajaxfilemanagerurl nella funzione ajaxfilemanager deve contenere l’url assoluto al file ajaxfilemanager.php.

Fatto questo possiamo caricare la pagina con il form via web e cliccare, quando abbiamo bisogno di inserire un’immagine, sull’icona IMMAGINE di tinymce e, successivamente quando ha caricato la popup del gestore immagini, clicchiamo sull’icona di fianco a Image Url e si aprirà la finestra di Ajax File Manager.

Comments (66)

  1. Marco

    Salve… dovrò risolvere lo stesso problema…

    Nessuno lo ha mai provato con tinyMCE_3_2_7 e Ajax File Manager v1.0 rc4???

  2. Dario

    Ciao,
    ho provato ad integrare tnymce con ajax filemanger seguendo il tuo turial su server aruba windows (php è supportato).

    Purtroppo quando cerco di uploadare un file cliccando upload di fianco al campo sfoglia ottengo un errore: “SyntaxError: Errore di sintassi”

    Da cosa potrebbe dipendere?

    Grazie mille
    Dario

  3. morphey


    Dario:

    Purtroppo quando cerco di uploadare un file cliccando upload di fianco al campo sfoglia ottengo un errore: “SyntaxError: Errore di sintassi”

    Ciao,
    hai provato a vedere i logs di php cosa dicono?
    Comunque quasi sicuramente il problema è mod_security di aruba che ha qualche regola che blocca in errore 500 alcune chiamate.

  4. andrea

    a me il tasto select nn compare quando metto la visualizzazione delle thumbnails…qualche soluzione? prima non appariva proprio, ho cambiato come aveva scritto marco l’impostazione CONFIG_EDITOR_NAME (mettendo tinymce) in config.base.php, e il tasto ora appare ma solo in details…potrebbe anche andare ma preferirei riuscire a farlo apparire anche nella visualizzazione delle thumbs. grazie per l’attenzione

  5. Giovanni

    Salve, ho seguito la guida, prima era già funzionante il mio tinymce e volevo aggiungere questo afm, ma ora la textarea non è più tinymce ma una semplice textarea, da cosa dipende?

  6. jean

    Salve, su un hosting windows aruba non riesco a navigare nelle sottocartelle della cartella che ho dedicato agli upload. Come mai?

  7. morphey

    @andrea e @Giovanni : controllate gli errori javascript nel browser. Sicuramente c’è qualche settaggio che non va.

    @jean : non ho provato su hosting windows aruba, ma penso sia un problema di permessi sulle cartelle o di percorsi assoluti. Controlla gli errori php o fai una pagina .php di test che legge l’albero delle directory di quella cartella.

  8. Losco

    Ciao Morphey,
    grazie mille per la guida, la versione tinymce+afm proposta phpletter è un ottima soluzione, ma come ci fai notare “è stantia”.

    Per quanto riguarda il problema che molti hanno riscontrato:
    dopo la corretta configurazione, selezionando un file, il tasto select che appare risulta privo di eventi… ho notato quanto segue,

    Molti staranno utilizzando wamp( mamp, xamp ) e firefox e chrome ( ie nomn saprei ), restituiscono un errore di sicurezza, nel dettaglio nel file /ajaxfilemanager/jscripts/for_tiny_mce.js nella cartella dei plugin di tiny_mce, sulla riga 9.

    Questo avviene quando il plugin viene inizializzato, poi l’evento sul tasto select restiuisce un oggetto vuoto.

  9. Losco

    In realtà l’errore era dovuto ad una cattiva configurazione…
    Nel file php ajaxfilemanager/inc/config.base.php, con la costante (CONFIG_WEBSITE_DOCUMENT_ROOT , ”) sotto codeigniter funziona, sempre con relative_urls = false nel config di tinyMCE

  10. Anna Pallotti

    Ciao, cercavo informazioni diverse sempre su TinyMCE, ma leggendo i commenti mi sono imbattuta in quello di Jean: è passato del tempo ma magari può essere utile a qualcun altro. Sull’hosting Aruba bisogna fare attenzione a trovarsi nella cartella public per fare cose di questo genere, sulle altre non è possibile impostare permessi di upload o modifica dei file.

  11. Enrico

    Ciao, mi funziona tutto (upload, selezione immagine ecc) – L’unico problema è che alla pressione del tasto Insert, viene inserita l’immagine ma manca l’indirizzo SRC del file… quale può essere l’errore?

    Grazie!

  13. Claudio

    Spero che anche se è passato molto tempo mi possiate aiutare.
    Ho lo stesso problema di Losco e cioè una volta selezionato il file, il tasto select è privo di eventi.

    Ho configurato tutto correttamente ma non riesco a capire cos’è che ancora non va. Ho configurato correttamente la costante (CONFIG_WEBSITE_DOCUMENT_ROOT , ”) all’interno del file config.base.php ma non capisco proprio.

    In locale funziona tutto correttamente, poi su server (register.it) non va.

  15. danilo de marco

    Salve, io ho un problema. Se utilizzo il plugin inlinepopups, al momento che apro la finestra per l’inserimento dell’immagine non compare il bottone per aprire ajaxfilemenager, cosa che succede se invece non specifico inlinepopups. Potete aiutarmi?

Lascia un Commento