Summernote: Starker WYSIWYG-Editor für Bootstrap 3

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Heute will ich Sie auf ein recht frisches JavaScript aufmerksam machen, mit dessen Hilfe Sie in unschlagbar simpler Art und Weise einen funktionsreichen WYSIWYG-Editor in Ihr Bootstrap-Projekt einbauen können. Das kleine Tool mit dem sympathischen Namen Summernote gibt es kostenlos. Es erfreut sich reger Entwicklungstätigkeit und wird wohl in den nächsten paar Wochen die Versionsnummer 1 erreichen. Aber schon zum jetzigen Zeitpunkt ist Summernote für den Produktiveinsatz bestens geeignet.

summernote-wysiwyg

Summernote: Bootstrap, jQuery und FontAwesome

Summernote setzt eine Version von Bootstrap ab 2.x voraus. Zudem erfordert es jQuery und FontAwesome. Da letztere beiden Komponenten ohnehin ebenfalls Bestandteil von Bootstrap sind, haben Sie mit einer vollständigen Bootstrap-Version bereits alle Voraussetzungen erfüllt. Stellen Sie überdies sicher, dass Sie den HTML5 Doctype verwenden.

Nachdem Sie Summernotes CSS und JS eingebunden haben, erstellen Sie ein DIV, dem Sie die ID summernote verpassen. Anhand der ID weiß das Script, worum es sich zu kümmern haben wird:

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

Summernote: So geht’s

Zusätzlich lässt sich der Funktionsaufruf mit Parametern anreichern, die etwa die Optik des Editors betreffen oder den Fokus direkt in das Feld setzen:

$('.summernote').summernote({
  height: 300,   //setzt die Höhe des Editorfeldes in Pixeln
  focus: true    //sorgt dafür, dass der Cursor sich nach dem Initialisieren im Editor befindet
});

Geben Sie keine Höhe an, vergrößert sich das Editorfeld dynamisch mit dem eingegebenen Content. Eine wesentliche Konfigurationsmöglichkeit betrifft die Funktionalität der Summernote-Toolbar. Hier können Sie genau festlegen, welche Features der Editor dem Anwender zur Verfügung stellen soll:

$(‚.summernote').summernote({
  toolbar: [
    //['style', ['style']], // no style button
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    //['insert', ['picture', 'link']], // no insert buttons
    //['table', ['table']], // no table button
    //['help', ['help']] //no help button
  ]
});

Eine Reihe von Callbacks erlaubt weitergehende Interaktionen. Zudem arbeitet Summernote über entsprechende Sprachdateien auch vielsprachig. Die jeweilige Sprache ist nach dem Einbinden über einen Parameter im Funktionsaufruf zu konfigurieren. Das ist alles sehr eingängig und verständlich. Umfangreiche Dokumentationen sind nicht erforderlich, um Summernote an den Start zu bekommen.

Sauber dokumentiert, schnell implementiert, auch Server-tauglich

Umso erfreulicher ist es, dass eine umfangreiche Dokumentation zu allen Einzelheiten des Editors dennoch bereit gestellt wird. Das ist ja gerade im Open Source-Bereich leider nicht selbstverständlich, senkt aber die Einstiegshürde nochmal gewaltig. Die Dokumentation enthält auch eine Menge Demos und Beispiele, die erklären, wie man Summernote serverseitig, etwa mit PHP oder Node.js implementiert.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Prinzipbedingt arbeitet Summernote auf der Basis von Inline-Styles, um etwaige Formatierungen umzusetzen:

summernote-codeview

Summernote integriert einen File-Uploader und baut Videos aus den gängigen Onlinediensten ein. Wie es sich für einen Bootstrap-Zusatz gehört, verhält sich das Tool voll responsiv. Nicht ganz uninteressant dürften die meisten auch das Gewicht finden. Mit lediglich 58kb für CSS und JS darf sich der Editor noch als Leichtgewicht bezeichnen.

Der schlanke Editor Summernote ist vor wenigen Tagen in der Version 0.5 verfügbar geworden und steht auf Github zum kostenlosen Download und zum ebenso kostenlosen Einsatz unter der sehr liberalen MIT-Lizenz, sowohl für private, wie auch kommerzielle Zwecke bereit. Summernote läuft mit allen modernen Browsern und dem IE ab Version 9. Support für die Version 8 des Redmond-Browsers ist angekündigt.

Summernote wird entwickelt von Alan Hong aus dem südkoreanischen Seoul. Seinem Twitter-Account zu folgen, wird den meisten Menschen eher weniger nutzen. Aber, das kann ja jeder für sich selbst entscheiden 😉

Links zum Beitrag:

  • Summernote | Homepage
  • Summernote | Dokumentation
  • Summernote auf Github

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

3 Kommentare auf "Summernote: Starker WYSIWYG-Editor für Bootstrap 3"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Sebastian H.
Gast

Jetzt müsste man nur noch pdf bzw. andere Dateien auch hochladen können, das wäre super!

bruno jennrich
Gast

hi dieter,

der editor sieht ja cool aus. hast du den mal im einsatz gehabt? und kannst du was zu diesem teil im vergleich zu tinymce sagen?

grüße

bruno

Aiken
Gast

Das Projekt hoert sich jedenfalls nicht schlecht an und werd ich mal in meinen Projekten testen mit bs 3.0.x 🙂

wpDiscuz