Jaaxo Cms
Jaaxo > BLOG > Mootools > MooEditor: un editor WYSIWYG diverso!

MooEditor: un editor WYSIWYG diverso!

Probabilmente starete pensando "ecco un altro editor visuale in javascript" ma vi assicuro che MooEditor è diverso da tutti gli altri presenti sul web!
Se è vero che le funzionalità che offre sono le medesime di altri suoi concorrenti più famosi, il modo in cui formatta il contenuto è sicuramente interessante e permette di avere un codice perfetto, pulito e senza strani tag che generalmente nascono dal nulla.



Se vuoi andare a capo l'editor inserirà un semplice tag BR senza creare un nuovo DIV o un nuovo paragrafo, se vuoi dare il grassetto il tag resituito sarà il semplice B e non SPAN insomma l'output è decisamente più leggibile.



Cerchiamo di capire più da vicino come funziona e in cosa è diverso.

Innanzitutto sfrutta le potenzialità offerte dal framework Mootools e ciò ha permesso di creare una classe javascript molto leggera e facile da editare secondo le proprie esigenze.

Non utilizza un Iframe ma un semplice DIV a cui associa la proprietà contentEditable. I vantaggi di questa tecnica sono innumerevoli pensate ad esempio alla comodità di correggere l'articolo di un vostro blog editandolo direttamente nella pagina in cui appare e vedendo realmente come cambia il contenuto.

Per evitare la creazione di tag superflui (che variano in base al tipo di browser utilizzato) tutta la formattazione viene gestita autonomamente limitando l'utilizzo di execCommand ai soli compartamenti corretti che questa funzione riesce a restituire.

Quindi ho creato le seguenti funzioni Paste, Paste_html e add_obj che si occupano di inserire nel contenuto i tag necessari alla formattazione.

Inoltre, quando andiamo a capo, viene catturato e bloccato l'evento enter in modo da evitare la creazione di un nuovo DIV o un nuovo P. Al loro posto viene inserito un semplice BR seguito dal simbolo di nuovo paragrafo ¶ che scompare automaticamente appena torniamo a scrivere.



Trovi MooEditor anche su Github e su MooTools.


MooEditor, Editor WYSIWYG
 

Commenti

Fill
Ottimo! Funziona alla grande
13/10/2011 alle 12:37
 
gasmor
eheh!
10/10/2011 alle 21:18
 
P G
Una buona alternativa mi sembra :-)
09/10/2011 alle 01:03
 
gasmor
Di niente ;)
29/09/2011 alle 14:35
 
blersewetry
quello che stavo cercando, grazie
17/09/2011 alle 08:50
 
Dizüstü Bilgisayar
Good look code good performance
18/08/2011 alle 14:52
 
Nome:
*
Email:
*
sito web:

Inserisci commento:

riporta il codice -> *