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