Mercury: un editor completo in Html5

Mercury è il nome in codice di un potente e nuovissimo editor (simile al tinymice) sviluppato completamente in HTML5 scopriamone insieme le feature principali.

A cosa serve un editor del genere? bhè se usate un cms come Joomla o WordPress quasi a nulla dato che ormai quasi tutti i cms integrano già nativamente un proprio editor, che il più delle volte è il famoso e pluri-blasonato TinyMCE.

Se invece sviluppate applicazioni web, cms e quant’altro di vostro pugno il problema dell’editor è un mondo a parte  che influenza di fatto l’user experiance dei vostri clienti/utenti. Molti consigliano di usare TinyMCE, che di fatto, è l’editor più completo e potente “Open” ovvero gratuito.  Fino ad oggi anche io rientravo in questa vastissima fetta di developer, ma oggi vi segnalo anche questo nuovissimo editor,  che integra di fatto tutte le gustose tecnologie e feature HTML5.

I vantaggi di Mercury

I vantaggi? bhè innanzitutto il drag and drop nativo di html5 aiuta davvero molto l’utente a rendere tutte le operazioni più facili e veloci ed intuitive. Di fatto da solo questo aspetto basta a sbaragliare tinyMCE ma se non siete ancora convinti vi fornisco altri 6 buoni motivi:

1) Gestione delle preview: sarà possibile visualizzare l’articolo in tempo reale nel documento, senza dover salvare  e modificare in seguito il lavoro.

2) Strumenti per i link: i vostri clienti potranno inserire autonomamente link a siti esterni o link interni in modo completamente VISUALE ( cosa che con  la versione open di tinyMCE è possibile solo tramite modifica del codice sorgente).

3) Shortcode come youtube e Vimeo in questo modo i clienti del vostro cms potranno embeddare senza problemi i propri video.

4) Upload delle immagini DRAG AND DROP , questa è  la feature che preferisco, dato che mi sono dovuto quasi sempre creare un uploader per le immagini in PHP “ad hoc”, questo tipo di caricamento semplifica davvero molto le cose…

5) Creazione di tabelle in modo facile e veloce

6) Interfaccia, chiara, pulita e professionale completamente personalizzabile, ma soprattutto innovativa.

Installazione di Mercury editor

Installare l’editor è molto semplice:

Assicuratevi di possedere un browser html5 e di avere creato una pagina web html5 di gestione. Dopodichè scaricate il pacchetto dal sito ufficiale e includete i file compressi della libreria Mercury per garantire un corretto funzionamento:

mercury.min.js , mercury_dialogs.js, mercury_loader.js sono i file da includere.

ricordatevi di includere anche il suo foglio di stile “mercury.css”.

A questo punto nel documento html5 del vostro pannello di gestione richiamate Mercury:

<div id="primary" class="mercury-region" data-type="editable">

 Contenuto da editare

</div>

In questo modo renderete il vostro div modificabile con il vostro nuovo e potente editor! Mi raccomando per un corretto funzionamento di includere tutti i file JS e CSS che troverete nel pacchetto download.

Requisiti e perplessità

Non è tutto rose e fiori (purtroppo) dato che questo editor, essendo sviluppato in html5 richiede:

– Browser di ultima generazione: (Firefox 4+, Chrome 10+, Safari 5+) non tutti i clienti ne possiedono uno, anzi….

– E’ consigliabile creare una struttura Html5 con relativo markup anche per il pannello di gestione php.

Il problema “più grande” è sicuramente il supporto cross-browser: molti clienti non possiedono un browser next gen e questo potrebbe rendere il nostro pannello admin creato su misura inutilizzabile. Se siete certi che il vostro cliente usi abitualmente un browser di ultima generazione allora Mercury è sicuramente la scelta più appropriata. Se invece il vostro cliente è il classico “utente medio” bhè TinyMCE rimane ancora il TOP degli editor.

Approfondimenti e risorse

– Sito ufficiale

– Demo ufficiale (non funziona il salvataggio e l’upload drag and drop per ovvi motivi)

– Uso e installazione

In linea di massima possiamo affermare con certezza che Mercury è un progetto davvero ben strutturato, che vi consiglio di provare caldamente almeno una volta !