Blog

Aktuelles und Wissenswertes.

Code Snippets in ProcessWire's CKEditor

Die Handhabung mit Codeschnipsel ist in ProcessWire's CKEditor ohne entsprechende Erweiterung recht mühselig. In diesem Artikel erfahrt Ihr, wir Ihr das Code Snippet Plugin installieren und Codeschnipsel auf eurer Website mittels Syntax-Highlighting benutzerfreundlich darstellen könnt.

Als Ausgangssituation nehme ich an, dass in eurer ProcessWire-Installation bereits ein Feld (in diesem Artikel als Inhalt bezeichnet) mit dem Typ Textarea existiert, für dessen Eingabefeld-Typ CKEditor ausgewählt wurde. Um für dieses Feld das Code Snippet Plugin zu aktivieren, muss zunächst die passende Version des Plugins gedownloaded werden. Am Ende der verlinkten Seite findet Ihr verschiedene Releases, die mit unterschiedlichen Versionen von CKEditor kompatibel sind. Welche Version des CKEditors von ProcessWire genutzt wird, findet Ihr heraus, indem Ihr folgenden Pfad in eurer ProcessWire-Installation öffnet: [DOCUMENT_ROOT]/wire/modules/Inputfield/InputfieldCKEditor - in diesem Verzeichnis findet Ihr einen Ordner, der sämtliche Dateien des CKEditors beherbergt und im Namen die Version von CKEditor enthält (in meinem Fall /ckeditor-4.10.1). Die mit CKEditor 4.10.1 kompatible Version des Code Snippet Plugins nennt sich ebenfalls 4.10.1 - stellt sicher, dass Ihr das richtige Release herunterladet, da eine Inkompatibilität zu JavaScript-Fehlern führt. In dem entzippten Verzeichnis des gedownloadeten Plugins befindet sich das Verzeichnis codesnippet, welches unter anderem eine plugin.js enthält - ladet den kompletten codesnippet-Ordner in [DOCUMENT_ROOT]/site/modules/InputfieldCKEditor/plugins hoch. Wenn Ihr alles richtig gemacht habt, findet Ihr, sobald Ihr das CKEditor-Feld in ProcessWire bearbeitet, unter dem Reiter Eingabe innerhalb der Sektion Plugins einen Eintrag für das Code Snippet Plugin:

Code Snippet Plugin in ProcessWire's CKEditor aktivieren
Code Snippet Plugin in ProcessWire's CKEditor aktivieren

Um das Code Snippet Plugin für dieses ProcessWire-Feld zu aktivieren, müsst Ihr schließlich beim codesnippet-Eintrag einen Haken setzen. Zu guter Letzt bedarf es noch einer Anpassung der CKEditor Toolbar, dir Ihr ebenfalls unter dem Reiter Eingabe findet. Fügt in der Textarea - bspw. ganz am Ende - CodeSnippet ein:

Toolbar Button für das Code Snippet Plugin in ProcessWire's CKEditor hinzufügen
Toolbar Button für das Code Snippet Plugin in ProcessWire's CKEditor hinzufügen

Hier ist es wichtig, dass Ihr die Groß- und Kleinschreibung genauestens einhaltet, da andernfalls das Toolbar-Icon nicht erscheint. Wurden sämtliche Schritte korrekt durchgeführt, findet Ihr auf einer beliebigen Seite, die dieses Feld verwendet, in der CKEditor-Toolbar ein Icon für das Code Snippet Plugin (im Folgenden rot eingekreist):

Code Snippet Toolbar Button in ProcessWire's CKEditor
Der Toolbar Button für das Code Snippet Plugin in ProcessWire's CKEditor

Klickt Ihr dieses Icon an, öffnet sich ein Dialog, in dem eine (Programmier)Sprache ausgewählt sowie Programmcode eingegeben werden kann. Für eine benutzerfreundliche Darstellung solcher Codeschnipsel auf eurer Website kann ich euch highlight.js empfehlen. Am schnellsten lässt sich diese Bibliothek durch das Einbinden von CDN-Dateien in eurem Template aktivieren:

<html>
    <head>
        <!-- .... -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">            
    </head>
    <body>
        <!-- .... -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </body>
</html>

Alternativ kann die highlight.js-Bibliothek auch lokal gehostet bzw. mit NPM installiert und einem Modul-Packer wie z.B. webpack geladen werden - mehr zu den verschiedenen Installationsmöglichkeiten findet Ihr hier.