TinyMCE: integrare perfettamente Ajax File Manager
Fonte: morphey
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.
Tags
Generale, Howto, Javascript, Linux, PHP, Programmazione
1 Commento »
Puoi lasciare una risposta, oppure fare un trackback dal tuo sito.
Una Risposta a “TinyMCE: integrare perfettamente Ajax File Manager”
Trackback e Pingback
- Nessun trackback o pingback disponibile per questo articolo
Lascia un commento
Pubblicato il 14 07 2008 alle 20:53
Qualcuno ha idea 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