zoo SEZIONI

Articoli_
LINKS & INFO

Macintosh

FRIENDs

Fotografi

Controinformazione

 

IL TINYMCE EDITOR - L'EDITOR HTML WYSIWYG PER IL NOSTRO SITO:

Avevo bisogno di un modo più "amichevole" per scrivere le pagine in HTML per gli articoli del mio sito e allora ho provato a utilizzare il TinyMCE editor che secondo molti e' il migliore in circolazione, free e facile da utilizzare e configurare.

Queste sono poche righe per non dimenticare cosa fare per configurarlo

A cosa serve? In pratica serve a questo...

Come?

Scaricare i file necessari dal sito http://www.tinymce.com/download/download.php 
scegliere la versione piu' recente

L’integrazione di TinyMCE in un sito web è abbastanza semplice. Scompattare il file e copiare la cartella “tiny_mce” contenuta in “tinymce/jscripts/” nella root del sito.

Quindi inserire il codice seguente nell’instestazione delle pagine prima del tag /HEAD

...
<script src="tiny_mce/tiny_mce.js" language="javascript" type="text/javascript">
script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
 mode : "textareas"
}); 
script>
...... 

A questo punto TinyMCE è installato e pronto per essere utilizzato su tutti i campi presenti nella pagina


 

Di seguito qualche esempio utile per la configurazione di pulsanti, plugin, e barre strumenti (almeno quelli usati da me)

 

ATTIVAZIONE DELLA FUNZIONE TABELLA

tinyMCE.init({ 
        theme :"advanced", 
        mode :"textareas", 
        plugins :"table", 
        theme_advanced_buttons3_add :"tablecontrols", 
        table_styles :"Header 1=header1;Header 2=header2;Header 3=header3", 
        table_cell_styles :"Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1", 
        table_row_styles :"Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", 
        table_cell_limit :100, 
        table_row_limit :5, 
        table_col_limit :5 
}); 


ATTIVAZIONE DI BOTTONI NELLA BARRE STRUMENTI 

tinyMCE.init({ theme : "advanced" , mode : "textareas" 
,theme_advanced_buttons1_add : "fontselect,forecolor,backcolor"
,theme_advanced_buttons2_add : "|,cut,copy,paste"
});

 

 ATTIVAZIONE DEL TEMA SEMPLICE 

<scripttype="text/javascript">
tinyMCE.init({
        mode :"textareas",
        theme :"simple"    //(n.b. no trailing comma, this will be critical as you experiment later)
});
 

USO DELL'OPZIONE Content_css:

Absolute path:

// File: http://domain.mine/mysite/index.html

 

tinyMCE.init({

        ...

        content_css : "/mycontent.css"    // resolved to http://domain.mine/mycontent.css

});

Relative path:

// File: http://domain.mine/mysite/index.html

 

tinyMCE.init({

        ...

        content_css : "mycontent.css"    // resolved to http://domain.mine/mysite/mycontent.css

});

Using multiple stylesheets:

tinyMCE.init({

        ...

        content_css : "mycontent.css,mycontent2.css"    // includes both css files in header

});


Cosi e' se vi pare
cia' ;)

 

Powered by Palox