Scrivere è più facile, con ID Editor

by Diego Pierangeli on 1 luglio 2014

Una funzionalità che viene richiesta spesso a chi sviluppa un’applicazione web è permettere all’utente di scrivere del testo formattato in HTML, ad esempio per inviare una mail usando le varianti grassetto o corsivo. Per farlo è necessario inserire nella propria applicazione un editor HTML.

Con Instant Developer è molto semplice utilizzare nelle proprie applicazioni un editor WYSIWYG. Fino alla versione 13.0 lo strumento integrato era CKEditor, uno degli editor HTML più diffusi in ambito web, ma a partire dalla 13.1 è possibile utilizzare anche un Editor alternativo.

Abbiamo scelto di sviluppare un nostro editor per facilitare le personalizzazioni dell’editor che molti nostri utenti hanno fatto a CKEditor e che richiedevano di implementarne dei plugin, operazione spesso complicata; inoltre essendo integrato nel framework di InDe abbiamo ottimizzato l’editing e lo scambio informazioni con il server.

Vi confesso che quando mi è stato chiesto di svilupparlo ho avuto un pò di paura, perché un componente come questo è un oggetto molto complesso. Il punto di partenza è stato studiare il funzionamento degli IFrame Editabili e di come armonizzarne il funzionamento tra i vari browser. Fatto questo è stato necessario disegnare e gestire la toolbar con i suoi comandi e permettere di inviare i comandi anche lato server. Devo dire che lavorarci è stato molto interessante.

Le nuove funzionalità che semplificano l’utilizzo rispetto a CKEditor sono le seguenti:

  • È possibile decidere da codice quali pulsanti della toolbar mostrare/nascondere.
  • È possibile configurare la lista dei colori da usare per impostare il colore di sfondo o del testo.
  • È possibile configurare la lista dei font da utilizzare.
  • È possibile inserire un’immagine caricandola automaticamente sul server; in questo caso l’evento OnFileUploaded permetterà di gestire dove copiarlo.
  • È possibile visualizzare una combo con dei Token il cui valore verrà automaticamente sostituito al testo selezionato dall’utente o verrà inserito nella posizione del cursore.
  • È possibile comandare l’editor dal codice applicativo, per pilotare la selezione; è anche possibile nascondere l’intera toolbar dell’editor e sostituirla con dei pulsanti personalizzati.

Ma queste sono solo alcune delle nuove funzionalità che avete a disposizione, se siete interessati potete trovare la documentazione completa in questo capitolo della guida online.

A questo punto non vi rimane che provarlo, io aspetto i vostri commenti!

  •    Bello, non vedo l'ora di usarlo al posto del vecchio editor!
  •    Interessante, ma ci sono funzionalità di CKEditor di cui non posso fare a meno.
  •    Per me un editor vale l'altro.
  •    Non uso editor WYSIWYG nelle mie applicazioni.

{ 3 comments… read them below or add one }

1 Carlo Pescetto 1 luglio 2014 alle 15:14

Molto bello, complimenti.

2 Senni Alberto 2 luglio 2014 alle 09:47

Molto interessante !
Approfitto per chiedere se vi è qualche lettore del blog che sta affrontando problematiche nell’ambito “collaborative disclusures” e/o “narrative reporting” con INDE

3 Stefano Teodorani 2 luglio 2014 alle 12:10

Ora che siete i “padroni del codice”, sarebbe utile implementare un editor markdown

Leave a Comment

Previous post:

Next post: