Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 7. November 2012

CodeMirror macht aus DOM-Objekten vollwertige Code-Editoren

Ein voll­wer­ti­ger Code-Editor mit Syntax-Highlighting für alle gän­gi­gen Sprachen und noch ein paar mehr, das ist CodeMirror. CodeMirror ist ein JavaScript-Tool, das ohne etwai­ge Abhängigkeiten aus­kommt und mitt­ler­wei­le als aus­ge­reift bezeich­net wer­den kann. Die Verwendung in der Basis-Konfiguration ist recht ein­fach, die Funktionalität mäch­tig und kom­plex, aber nach­voll­zieh­bar.

CodeMirror: Motor verschiedener bekannter Dienste

Das JavaScript-Tool CodeMirror des Niederländers Marijn Haverbeke liegt seit weni­gen Tagen als Beta 2 der Version 3.0 vor. Ein neu­es Major-Release, neben dem eben­falls aktu­el­len CodeMirror 2.35, steht vor der Tür. Haverbekes Tool exis­tiert bereits seit 2009, erfreut sich aber nach rela­tiv gemäch­li­chem Start inzwi­schen regel­mä­ßi­ger Fortentwicklung. Die Version 2, die in Kürze durch die Version 3 abge­löst wer­den soll, wur­de im März 2011 als kom­plet­tes Rewrite der eben­falls erst zu die­sem Zeitpunkt in den Status einer Version erho­be­nen Version 1 vor­ge­stellt. Die Versionen sind unter­ein­an­der nicht kom­pa­ti­bel. Haverbeke scheut vor radi­ka­len Kursänderungen nicht zurück, so er sie für erfor­der­lich hält.

CodeMirror unter­stützt bereits mehr als 50 Sprachen, wobei wei­te­re über eine Schnittstelle recht ein­fach sel­ber defi­niert wer­den kön­nen. Das Tool kommt in etli­chen bekann­ten grö­ße­ren Werkzeugen zum Einsatz. So ver­wen­det es etwa Adobe in sei­nem Code-Editor Brackets, Github nutzt es für die eige­ne Android-App, Google benutzt es für sein Produkt Apps Script. Auch der bekann­te JavaScript-Playground JSBin setzt auf Haverbekes Tool. Die Liste lässt sich fast belie­big ver­län­gern.

Das ist nach­voll­zieh­bar, bedenkt man, mit was für einer Funktionsfülle CodeMirror auf­war­ten kann. Über eine fle­xi­ble API kann es aus eige­nen Entwicklungen auf nahe­zu jede erdenk­li­che Art und Weise ange­spro­chen und mani­pu­liert wer­den.

Entsprechend muss man eine gewis­se Einarbeitungszeit ein­pla­nen, wenn man die Möglichkeiten CodeMirrors aus­rei­zen will. Haverbeke bie­tet kom­mer­zi­el­len Support an. Dieser liegt mit 100 USD für einen Grundsupport und 500 USD für Premium-Unterstützung sicher­lich nicht im Bereich des Otto Normalentwicklers. Unternehmen wie Adobe oder Google wer­den damit indes kein Problem haben.

Otto Normalentwickler kann sei­ne Begeisterung für Haverbekes Tool immer­hin noch durch Spenden aus­drü­cken. Mehrere Wege sind auf der Website gelis­tet. Grundsätzlich kommt CodeMirror unter einer MIT-ähn­li­chen Lizenz kos­ten­frei ins Haus.

CodeMirrors Basis-Konfiguration

Nehmen wir ein­mal an, Sie wol­len nicht direkt das nächs­te Brackets ent­wer­fen, son­dern ledig­lich eine Textarea auf Ihrer Website mit einem Code-Editor aus­stat­ten. Das ist mit CodeMirror sehr ein­fach.

Zunächst wird das Script, ein kor­re­spon­die­ren­des Stylesheet, sowie der sog. Mode, also die JavaScript-Instruktionen für die zu ver­ste­hen­de Sprache, ein­ge­bun­den. Das sieht so aus. Im Beispiel soll der Editor mit JavaScript umge­hen kön­nen:

%MINIFYHTML3c712448fb3b29e51fa4e21aa105bfc911%%MINIFYHTML3c712448fb3b29e51fa4e21aa105bfc912%

Danach ist es ledig­lich noch erfor­der­lich, CodeMirror auf die ent­spre­chen­de Textarea anzu­set­zen. Da es sich bei der Verwendung der Textarea um einen der meist genutz­ten Anwendungsfälle han­delt, lie­fert Haverbeke einen Shortcut mit erwei­ter­ter Funktionalität mit:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

So ein­ge­setzt, sorgt CodeMirror unter ande­rem dafür, dass der Inhalt der Textarea beim Abschicken des Formulars, des­sen Teil die Textarea ist (wenn sie es ist) aktua­li­siert wird. CodeMirror lie­fert tat­säch­lich nur den rei­nen Editor mit den Funktionen zur Syntax-Erkennung und Bearbeitung, aber kei­ner­lei UI-Elemente.

Die muss man sich sel­ber bau­en. Oder man schaut bei Jeremy Greens Projekt CodeMirror UI auf Github vor­bei. Green hat CodeMirror UI als Wrapper kon­zi­piert, der ver­schie­de­ne häu­fig benö­tig­te UI-Funktionen, etwa Suchen & Ersetzen, zulie­fert.

Links zum Beitrag:

  • In-brow­ser Code Editing Made Bearable – CodeMirror
  • Adobes Brackets imple­men­tiert CodeMirror – Brackets.io
  • Ein wei­te­rer CodeMirror-Verwender – Google Apps Script
  • JS Bin nutzt CodeMirror – JS Bin
  • jagt­he­drum­mer / codemir­ror-ui – Github
Dieter Petereit

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.

Ein Kommentar

  1. Starke Sache, kann ich gut für mei­nen selbst gebas­tel­ten Datei-Manager ver­wen­den. Danke!

Schreibe einen Kommentar zu gnomefan Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.