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