Quill 1.0: Dieser Rich-Text-Editor für Web-Apps ist anders

Dieter Petereit

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

Rich-Text-Editoren kennst du. Das sind diese Dinger, die aus einfachen Textfeldern eine Art Textverarbeitung zaubern. Jeder WordPress-Blogger verwendet einen, nämlich den TinyMCE, der immer noch Standard im beliebtesten CMS der Welt ist. Quill ist eine modernere Variante der gleichen Spezies.

Quill Projekt-Website. (Screenshot: Dr. Web)

Quills Projekt-Website. (Screenshot: Dr. Web)

Quill 1.0: Open Source und unabhängig

Quill hat es nach rund zwei Jahren als Open-Source-Projekt endlich geschafft, eine stabile Version 1.0 zu erreichen. Als positives Ergebnis dieser langen Entwicklungszeit mag gelten, dass die Dokumentation wirklich exzellent ist. Da können kleinere und jüngere Projekte kaum mithalten. Dabei ist eine gute Dokumentatioon gerade im Open-Source-Bereich von besonderer Bedeutung, denn es kommt häufig genug vor, dass vormals hochengagierte Kontributoren im Handumdrehen die Lust am Projekt verlieren und sich spontan abwenden.

Quill ist eine JavaScript-Lösung ohne weitere Abhängigkeiten, dafür mit eigener API. Alles, was du benötigst, um mit Quill produktiv arbeiten zu können, befindet sich in dem JavaScript-File, welches du schlicht wie gewohnt in deine Dokumente einbaust.

So fügst du Quill deiner Web-App hinzu

Um ein Element mit den Fähigkeiten von Quill auszustatten, fügst du in deinem HTML etwa folgendes ein:

Danach lässt du das Script auf das Element los. Das kann so aussehen:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

Wenn nun jemand das Element verwendet, kommt zum Beispiel das dabei heraus:

Quill: Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)

Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)

Wie du schon im JavaScript-Quellcode sehen kannst, lässt sich Quill modular so auf das enthaltende Element anpassen, wie du es als Entwickler für richtig erachtest. Die einzelnen Funktionsmodule werden mit sprechenden Namen in die UI integriert. So erhalten deine Benutzer die Möglichkeit, Text fett zu formatieren, nur, wenn du bold zum Funktionsumfang zugefügt hast.

Quill: Flexibel dank eigener API

Die eigene API erlaubt es dir, weitere Funktionsmodule nach deinen Bedürfnissen zu erstellen und nahtlos in die UI von Quill einzufügen. Vielleicht muss deine Web-App CAD-Zeichnungen aufnehmen können, oder was weiß ich. Generell musst du Quill nicht konfigurieren. Es funktioniert out-of-the-box für die meisten Anwendungsfälle vollkommen zufriedenstellend.

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

E-Book Bundle von Andreas Hecht

Neben Erweiterungsmodulen für Features, die Quill nicht bietet, kannst du mit eigenen Funktionen auch solche ersetzen, die Quill bereits selber hat, wenn dir selbige nicht hinreichend sind. Alle Module solltest du als separate JavaScript-Dateien anlegen, kannst sie aber auch direkt zu Quill hinzufügen, was allerdings unter dem Gesichtspunkt einfacher Updates nicht sonderlich sinnvoll sein wird.

Die Möglichkeit, den Leistungsumfang des Editors zu erweitern oder zu verändern, verdankt Quill seinem größten Alleinstellungsmerkmale, der DOM-Abstraktionsebene Parchment. Im Quill-Blog findest du eine ausführliche Präsentation der Fähigkeiten von Parchment.  Du erfährst nämlich, wie du die UI der bekannten Publikations-Plattform Medium damit nachbauen könntest.

Ein gutes Gefühl für die Flexibilität des modernen Tools kannst du gewinnen, wenn du dich ein bisschen im interaktiven Playground auf der Projektseite umsiehst oder Codepen nutzt.

Die Entwickler legen besonderen Wert auf die Feststellung, dass Quill quer über alle Plattformen konsistent in gleicher Art und Weise funktioniert und sogar auf Tablets und Smartphones vollumfänglich nutzbar ist, sowie ausschließlich standardkonformes HTML erzeugt. Der gesamte In-, wie auch Output läuft über JSON.

Quill: Verfügbarkeit und Lizenz

Quill ist für den Einbau in die eigene Website via Download verfügbar, kann aber auch über ein CDN, getrieben von Amazon Cloudfront, in deine Dokumente eingebettet werden. Der Sourcecode ist auf Github zu erhalten. Da es sich um ein Open-Source-Projekt handelt, unterliegt die Nutzung keinen Beschränkungen. Du kannst Quill unter der BSD-Lizenz also auch in kommerziellen Projekten einsetzen.

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

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar