Creare editor WYSIWYG con Summernote

Una delle principali esigenze di uno sviluppatore è quella di avere sempre con sé il proprio ambiente di sviluppo, per questo motivo spesso ci si rivolge a delle piattaforme in Rete. Oggi vogliamo parlarvi di qualcosa di simile, Summernote, una libreria Javascript che consente di realizzare il proprio editor WYSIWYG (What You See Is What You Get) online.

Summernote viene sviluppato da una vasta community di volontari e il suo codice è disponibili sotto licenza open source. Le sue funzionalità sono state implementata tramite i framework jQuery e Bootstrap. È possibile configurare ed installare Summernote in pochi step grazie alla sua struttura modulare.

Dopo il download basterà dare in pasto i giusti file a Booststrap per realizzare un primo setup di Summernote. Bootstrap infatti richiede dei semplici elementi HTLM5/CSS per poter genere Web App (in questo caso Summernote).

Iniziamo generando il file HTML e poi inseriamo le librerie e i file necessari che abbiamo scaricato in precedenza:

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>

Ricordatevi di aggiustare le varie file path cosi da non avere problemi nel caso i file si trovassero scaricati in altre directory. Adesso aggiungiamo questo dentro il tag body:

<div id="summernote">Hello Summernote</div>

Questo ci servirà per renderizzare gli elementi che troveremo dentro i summernote editing tool. Ora aggiungiamo la parte finale dello script in modo da avviare Summernote:

$(document).ready(function() {
  $('#summernote').summernote();
});

Una delle feature più interessati di questo editor è la possibilità di personalizzare la GUI. Ecco un esempio di come è possibile impostare l'interfaccia:

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

Summernote può essere facilmente integrato con Django, Rails e Angular, dispone inoltre di vari plugin che espandono le sue funzionalità.

Via Summernote