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.
Qualcuno sa come integrare ajax file manager con mkportal?
Qualcuno ha idea invece di come integrare ajax file manager nel TinyMCE di WordPress? Riesco a far apparire l’icona per il filebrowser callback, ma poi non succede niente. Non ho la più pallida idea di dove inserire la funzione ajaxfilemanager
Ma dopo che faccio l’upload del file come faccio a fare in modo che compaia nella textarea. A me non succede.
@Cionimba, xke’ vuoi integrarlo in wordpress? a me sembra che il nuovo gestore che hanno integrato è il massimo dell’ottimizzazione (con ajax file manager appesantisci solamente).
@Tom, quando apri il file manager dal tinymce, scegli l’immagine e la selezioni cliccando sull’apposito checkbox, successivamente clicchi su SELECT nella finestrella di sinistra.
Credo che l’opzione select al quale alludi non sia standard. Io anche se spunto la checkbox dell’immagine, non ho “select” nella colonna di sinitra.
Ho risolto la questione. Forse a qualcuno può essere utile.
E’ necessario settare CONFIG_THEME_MODE del file config.base.php con l’editor che stiamo utilizzando. Nel mio caso TinyMCE.
Ancora una correzione. Mi riferivo a CONFIG_EDITOR_NAME e non a CONFIG_THEME_MODE .
Salve ragazzi, volevo chiedervi una cosa in merito a questo articolo e cioè che in locale mi funziona bene tutto mentre quando pubblico tutto online sul mio sito non mi carica il tema di default, va impostato qualche parametro diverso da quelli visti sopra? ciao e grazie
ciao emanuele, si effettivamente ho omesso che l’editor l’ho impostato direttamente nel file di configurazione (via codice a mano) di AjaxFileManager.
Per ovviare al problema, puo cambiare la seguente riga:
con:
Ok morphey, funziona tutto. ma è possibile per esempio evitare l’upload di foto o di immagini che superino una larghezza di 600px per esempio?grazie ciao
ciao @emanuele, leggi il contenuto del file di configurazione di Ajax File Manager, ci sono i limiti per le immagini da impostare direttamente lì.
[...] immagini come AjaxFileManager (un howto per configurare i due framework lo trovi sul mio blog: TinyMCE: integrare perfettamente Ajax File Manager | blog.morphey.org ) __________________ morphey ———————- [...]
Qualcuno potrebbe aiutarmi??
Ho seguito la guida, però non mi funziona niente….
Potreste rispiegare??
Grazie!!
ciao, che problema hai esattamente?
Ciao, ho installato il tutto su server linux e funziona alla perfezione. HO dovuto installarlo anche su server windows ma purtroppo mi da un errore ed è questo:
[object error].
Cosa posso fare?
Ringrazio in anticipo
..l’errore [object error] me lo da quando provo a fare l’upload perchè il resto dell’interfaccia funziona perfettamente. Vedo le immagini che già ci sono (caricate in ftp) ma non riesco a fare l’upload di altre.
ciao, ma l’errore te lo restituisce php oppure javascript?
Salve ragazzi, avrei un problema con gli indrizzi relativi. Quando seleziono l’immagine che voglio inserire nella textarea il programma mi aggiunge all’indirizzo http://127.0.0.1 (in locale) anche il percorso “completo” del file…ovviamente non mi viene visualizzato nulla. (la cartella dove effettuo l’upload dei file è FILES)
http://127.0.0.1/c:/programmi/easyphp1-8/www/iscrizioniswan/tinymce_3_2_2/jscripts/files/1.jpg. Sotto le impostazioni del file config_base.php
(‘CONFIG_SYS_DEFAULT_PATH’, ‘../../../../files/’);
(‘CONFIG_SYS_ROOT_PATH’, ‘../../../../files/’);
(‘CONFIG_SYS_FOLDER_SHOWN_ON_TOP’, true); (“CONFIG_SYS_DIR_SESSION_PATH”, ‘../../../../session/’);
(“CONFIG_SYS_PATTERN_FORMAT”, ‘list’);
Dove sbalglio?
Grazie mille
Il primo problema l’ho risolto. Ultimo problema
…Quando accedo alla popup seleziono prima un’immagine, poi spunto il checkbox (thumbnails) ma non mi appare l’anteprima.
Ciao Morphey, me lo restituisce javascript da internet explorer. Invece con mozilla gira il loading all’infinito ma non carica nulla.
per @francesca: sul server dove lo provi, hai per caso mod_security attivo? ho riscontrato lo stesso problema con una regola di mod_security. Per ovviare, l’ho disattivato con queste direttive nell’.htaccess (solo per mod_security2):
SecRuleEngine off
per @gino: ti restituisce un errore javascript?
Ciao e grazie per la risp!
Non mi restituisce nessun errore. L’upload e l’inserimento funzionano bene. Le immagini che compaiono nella pop up le posso visionare solo cliccando sullo stemma vicino ogni foto (appare una specie di galleria-lightroom), ma se attivo il checkbox (thumbnails) le anteprime sulla destra non vengono visualizzate!?!? al loro posto c’è il segna posto immagini.
Morphey ho cercato in ftp l’ .htaccess ma non lo trovo, che aruba lo gestisca diversamente?
parlo sempre di server windows aruba
uhm, se è windows ho qualche dubbio. Dovresti far controllare lato-server gli error_logs per vedere se, richiamando la pagina, riceve qualche errore il server web.
Ho convertito da server windows a linux e stranamente mi da lo stesso errore. Eppure gli stessi file sono presenti su un altro dominio linux e funziona tutto. COme è possibile?
Morphey ho risolto, dopo la conversione a linux continuavo a puntare su windows. Cmq a quanto pare è proprio windows e permessi vari che gli danno fastidio.
Ciao
F.
ciao, sono contento che hai risolto
Fammi sapere se ti trovi bene
Ottimamente Morphey, ti ringrazio per il tutorial..
Ciao morphey, ciao a tutti…
perfavore ho bisogno del vostro aiuto!!
ho provato in tutti i modi ma non riesco a integrare Ajax File Manager con tinymce…
non potete inviarmelo già integrato e con qualche direttiva per il funzionamento?
please! non posso andare avani a tentativi!!
ciao, che problema hai esattamente ?
Sembra che funzioni tutto ma una volta selezionata l’immagine dentro ajaxmanager, dove devo cliccare per caricarla nel testo? Mi sfugge qualcosa? ciao ciao.
Nell’ipotesi che ci siano molti utenti che possono scrivere e caricare immagini, come è possibile limitare l’accesso ad ognuno alla sola propria cartella?
Ciao, per inserirla nel testo devi selezionarla con il checkbox che trovi sotto l’immagine nel filemanager e poi clicchi sul tasto che compare sulla sinistra (Insert).
Per quanto riguarda l’accesso degli utenti, non credo che la libreria sia sviluppata per questo.
Ti consiglio di leggere la documentazione che trovi sul loro sito http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
Ciao,
dopo aver effettuato l’installazione in locale, quando vado a caricare un immagine nel campo url mi compare:
“http://localhost/C:/xampp/htdocs/apl/amministrazione/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager/upload/immagine.jpg”
E chiaramente l’immagine risulta illeggibile dallo script. Cosa ho sbagliato nella configurazione?
ciao, probabilmente hai impostato in modo errato il path nella configurazione dello script.
Se usi windows, come path prova a mettere i doppi slash invece che gli slash normali del tipo:
[code]
"c:\\xampp\\htdocs\\....."
[/code]
Salve a tutti. Ho seguito tutta la procedura, ma quando vado a cliccare sul tasto accanto al campo dell’url dell’immagine (nella popup che compare cliccando sul tasto immagine dell’editor) non compare nessuna finestra (quindi ajaxfilemanager non compare);
Con Internet Explorer mi da un errore in basso a sinistra (‘Errore nella visualizzazione della pagina’), menstre con Firefox mi carica all’infinito senza che compaia nulla.
Cosa ho sbagliato?
ciao, probabilmente è un errore javascript per codice messo male… posta il link al tuo sito oppure vedi negli errori di firefox in che punto della pagina lo riscontra…
Il sito è in locale, quindi non posso postare il link. Come faccio a vedere gli errori di FireFox? Lì mi carica solo all’infinito, è in IE che mi dice errore nel caricameto…se mi dà la riga dell’errore, a quale file si riferisce?
a me non mi fa inserire l’immagine che carico. COME DEVO FARE ?
Ciao,
ti da un errore specifico?
Hai controllato gli error_log di apache per vedere se c’è qualche tipo di problema?
apparentemente nessun problema, mi apre il browser in ajax per caricare le foto, ma poi per inserire la foto caricata, non ci dovrebbe essere un pulsante inserisci o qualcosa del genere ?
eventualmente come si può usare il file popup_imagemanager.js che c’è su joomla ? credo che faccia la stessa cosa di ajaxfilemanager giusto ?
in pratica non mi compare il tasto select o inserisci, ma come mai che devo fare ?
Ciao,
popup_imagemanager.js di joomla credo sia personalizzato proprio per l’utilizzo con esso.
Puoi usare ajaxfilemanager benissimo.
Controlla nel browser (ti consiglio tramite Firefox+Firebug) gli eventuali errori javascript e fammelo vedere.
Ma è pubblico il sito dove lo stai mettendo?
sto lavorando in locale ancora, il tasto inserisci non mi compare da nessuna parte, solo se trascino l’immagine sul campo url della finestra iniziale di tiny mce me la inserisce. Ok ora provo e posto
non porta nessuno errore, come faccio a capire che c’è errore con firebug, non l’ho mai usato e cmq non capisco ancora come mai sto tasto inserisci non si vede mbà
è normale che quando clicco sull’icone dell’immagine per inserire le foto del mio editor messo in locale in basso mi compaia soltanto javascript:;, mentre sull’esempio del sito di ajaxmanager ci sia questo javascript:tinyMCE.execInstanceCommand(‘mce_editor_0′,’mceAdvImage’); ?
nessuno mi sa dire come poter fare ?
Ciao ragazzi, qualcuno di voi ha provato a localizzare ajaxfilemanager in italiano? Io si, copio il file della lingua inglese lo rinomino e traduco tutte le frasine, ma quando vado a impostare la mia lingua (in config.base) lo script smette di funzionare correttamente, mah
idee? Ps. non lo fa se semplicemente copio il file della lingua inglese e lo rinomino e imposto questa finta nuova lingua.
io sto ancora aspettando la risposta del come mai dopo che carico la foto non mi visualizza il tasto inserisci
Salve… dovrò risolvere lo stesso problema…
Nessuno lo ha mai provato con tinyMCE_3_2_7 e Ajax File Manager v1.0 rc4???
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
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.
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
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?
Salve, su un hosting windows aruba non riesco a navigare nelle sottocartelle della cartella che ho dedicato agli upload. Come mai?
@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.
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.
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
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.
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!
Ci rinuncio visto che con Chrome non funziona praticamente nulla.
Leave your response!
LinkedIn
Se vuoi vedere il mio profilo su LinkedIn clicca sul pulsante
Provider
Translate
Commenti recenti
Facebook
Tag
Categorie
Blogroll
Blogroll
Most Commented
Most Viewed