Webem-lab: Realizzazioni siti web

TinyMCE: Integrare un editor HTML in un progetto Web

Gli utenti che navigano sul web sono abituati a modificare i contenuti o articoli utilizzando un Editor HTML integrato sul sito stesso.

Esistono molte soluzioni Open Source pronte per essere integrate nei nostri progetti. Uno dei più utilizzati è TinyMCE - Javascript WYSIWYG Editor

TinyMCE

TinyMCE è indipendente dalla piattaforma di sviluppo che scegliamo. Possiamo quindi utilizzarla in progetti Web: JAVA, .NET o PHP. E' rilasciato con licenza Open Source (LGPL) da Moxiecode Systems AB.

TinyMCE è facilmente integrabile dentro un Content Management Systems.

Installazione

Nel wiki possiamo trovare tutte le informazioni per integrare questo editor. Scarichiamo e scompattiamo il file zip che troviamo nell'area download

La libreria (core) si trova nella cartella: jscripts

Esempio di utilizzo

Creiamo una pagina di esempio che chiameremo example.html. Carichiama la libreria javascript tiny_mce.js, inizializiamo l'editor con la funzione tinyMCE.init ...

<h3>TinyMCE Test</h3>
<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH --><!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" --><form method="post" action="show.php">
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> <input value="Save" type="submit" />
</form>

• Creaiamo la pagina php - show.php -  che in questo esempio visualizzera il contenuto editato nell'html area.

Come potete vedere nell'immagine sotto riportata l'editor è ricco di funzionalità.

Approfondimenti:

Al seguente link potete trovare una guida su come integrare questo editor in un progetto dotnet.

• < Prec
• Succ >