Javascript

CodeMirror macht aus DOM-Objekten vollwertige Code-Editoren

7. November 2012
von

Ein vollwertiger Code-Editor mit Syntax-Highlighting für alle gängigen Sprachen und noch ein paar mehr, das ist CodeMirror. CodeMirror ist ein JavaScript-Tool, das ohne etwaige Abhängigkeiten auskommt und mittlerweile als ausgereift bezeichnet werden kann. Die Verwendung in der Basis-Konfiguration ist recht einfach, die Funktionalität mächtig und komplex, aber nachvollziehbar.

CodeMirror: Motor verschiedener bekannter Dienste

Das JavaScript-Tool CodeMirror des Niederländers Marijn Haverbeke liegt seit wenigen Tagen als Beta 2 der Version 3.0 vor. Ein neues Major-Release, neben dem ebenfalls aktuellen CodeMirror 2.35, steht vor der Tür. Haverbekes Tool existiert bereits seit 2009, erfreut sich aber nach relativ gemächlichem Start inzwischen regelmäßiger Fortentwicklung. Die Version 2, die in Kürze durch die Version 3 abgelöst werden soll, wurde im März 2011 als komplettes Rewrite der ebenfalls erst zu diesem Zeitpunkt in den Status einer Version erhobenen Version 1 vorgestellt. Die Versionen sind untereinander nicht kompatibel. Haverbeke scheut vor radikalen Kursänderungen nicht zurück, so er sie für erforderlich hält.

CodeMirror unterstützt bereits mehr als 50 Sprachen, wobei weitere über eine Schnittstelle recht einfach selber definiert werden können. Das Tool kommt in etlichen bekannten größeren Werkzeugen zum Einsatz. So verwendet es etwa Adobe in seinem Code-Editor Brackets, Github nutzt es für die eigene Android-App, Google benutzt es für sein Produkt Apps Script. Auch der bekannte JavaScript-Playground JSBin setzt auf Haverbekes Tool. Die Liste lässt sich fast beliebig verlängern.

Das ist nachvollziehbar, bedenkt man, mit was für einer Funktionsfülle CodeMirror aufwarten kann. Über eine flexible API kann es aus eigenen Entwicklungen auf nahezu jede erdenkliche Art und Weise angesprochen und manipuliert werden.

Entsprechend muss man eine gewisse Einarbeitungszeit einplanen, wenn man die Möglichkeiten CodeMirrors ausreizen will. Haverbeke bietet kommerziellen Support an. Dieser liegt mit 100 USD für einen Grundsupport und 500 USD für Premium-Unterstützung sicherlich nicht im Bereich des Otto Normalentwicklers. Unternehmen wie Adobe oder Google werden damit indes kein Problem haben.

Otto Normalentwickler kann seine Begeisterung für Haverbekes Tool immerhin noch durch Spenden ausdrücken. Mehrere Wege sind auf der Website gelistet. Grundsätzlich kommt CodeMirror unter einer MIT-ähnlichen Lizenz kostenfrei ins Haus.

CodeMirrors Basis-Konfiguration

Nehmen wir einmal an, Sie wollen nicht direkt das nächste Brackets entwerfen, sondern lediglich eine Textarea auf Ihrer Website mit einem Code-Editor ausstatten. Das ist mit CodeMirror sehr einfach.

Zunächst wird das Script, ein korrespondierendes Stylesheet, sowie der sog. Mode, also die JavaScript-Instruktionen für die zu verstehende Sprache, eingebunden. Das sieht so aus. Im Beispiel soll der Editor mit JavaScript umgehen können:

1
2
3
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>

Danach ist es lediglich noch erforderlich, CodeMirror auf die entsprechende Textarea anzusetzen. Da es sich bei der Verwendung der Textarea um einen der meist genutzten Anwendungsfälle handelt, liefert Haverbeke einen Shortcut mit erweiterter Funktionalität mit:

1
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

So eingesetzt, sorgt CodeMirror unter anderem dafür, dass der Inhalt der Textarea beim Abschicken des Formulars, dessen Teil die Textarea ist (wenn sie es ist) aktualisiert wird. CodeMirror liefert tatsächlich nur den reinen Editor mit den Funktionen zur Syntax-Erkennung und Bearbeitung, aber keinerlei UI-Elemente.

Die muss man sich selber bauen. Oder man schaut bei Jeremy Greens Projekt CodeMirror UI auf Github vorbei. Green hat CodeMirror UI als Wrapper konzipiert, der verschiedene häufig benötigte UI-Funktionen, etwa Suchen & Ersetzen, zuliefert.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , ,

Ein Kommentar zu „CodeMirror macht aus DOM-Objekten vollwertige Code-Editoren
  1. gnomefan am 8. November 2012 um 08:39

    Starke Sache, kann ich gut für meinen selbst gebastelten Datei-Manager verwenden. Danke!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!