Bludits neue Markdown Funktion ist fantastisch und ermöglicht es, noch schneller und komfortabler Beiträge zu schreiben und gleich entsprechend zu formatieren. Allerdings hat die Markdown-Funktionalität noch gewisse Einschränkungen. Und hier kommt dann wieder das gute alte HTML ins Spiel. Und das während dem Schreiben einzutippen ist nicht besonders benutzerfreundlich. Schöner wäre es doch, den Editor SimpleMDE, der hier zum Einsatz kommt, um einen Button mit der jeweiligen Funktionalität zu erweitern!

Bereits implementierte Funktionen

Bludits Plugin "SimpleMDE" bringt schon einige klasse Funktionen mit, die man im Plugin-Menü aktivieren kann. Hier eine Auflistung aller Funktionen:

  • bold
  • italic
  • strikethrough
  • heading
  • heading-smaller
  • heading-bigger
  • heading-1
  • heading-2
  • heading-3
  • code
  • quote
  • unordered-list
  • ordered-list
  • clean-block
  • link
  • image
  • table
  • horizontal-rule
  • preview
  • side-by-side
  • fullscreen
  • guide
  • undo
  • redo

Aber Funktionen wie zum Beispiel, ein Wort oder Abschnitt rot zu färben oder einen Text zentral darzustellen, sucht man leider vergebens. Ich habe eine Möglichkeit gefunden, diese Funktionalität nachträglich einzubauen.

Achtung! Die folgende Implementierung ist ein sogenannter "Hack". Das bedeutet, nach einem Update von Bludit wird diese Funktionalität wieder mit der Standardversion des Plugins überschrieben und ist somit wieder weg. Dies kann man durch Kopieren und umbenennen des gesamten Plugins umgehen, bekommt dann aber natürlich auch keine Updates des SimpleMDE-Plugins.

SimpleMDE Plugin erweitern

Wir wollen also nun das Plugin so erweitern, dass wir am Ende in der Lage sind, die Textfarbe eines Wortes oder Abschnitts im Beitrag mit einem Klick auf einen Button rot darzustellen. Analog dazu kann man dann weitere Funktionalitäten implementieren.

Zunächst öffnen wir die Datei "simplemde.min.js" unter dem Verzeichnis "bl-plugins/simplemde" und sucht nach der Stelle "K={bold" (Zeile 15, 64te Stelle). Zwischen der ersten öffnenden geschweiften Klammer und vor dem Wort "bold" fügen wir nun folgenden Code ein:

//Name, wie man ihn auch in den Plugineinstellungen angeben kann
redfont : {
    name: "redfont",
    action: function customFunction(editor){
        var cm = editor.codemirror;

        var startTag = '<font color="red">';
        var endTag = '</font>';

        //Die Selektion des Benutzers wird in einer Variablen gespeichert
        var selection = cm.getSelection();
        //User hat nichts ausgewählt
        if (selection.length == 0)
        {
            //Start und Endtag an die aktuelle Cursorposition setzen
            cm.replaceSelection(startTag+endTag);
            //Neue Cursorposition abfragen
            var cursorPosition = cm.getCursor("start");
            //Den Cursor zwischen die neuen Tags setzen
            cm.setCursor({line: cursorPosition.line, ch: cursorPosition.ch-endTag.length});
        }
        //User hat etwas ausgewählt
        else {
            cm.replaceSelection(startTag + selection + endTag);
            var cursorPositionStart = cm.getCursor("start");
            var cursorPositionEnd = cm.getCursor("end");
            //Zeichen zwischen den neuen Tags selektieren
            var startCursor = {line: cursorPositionStart.line, ch: cursorPositionStart.ch-endTag.length-selection.length};
            var endCursor = {line: cursorPositionEnd.line, ch: cursorPositionEnd.ch-endTag.length};
            cm.setSelection(startCursor, endCursor);
        }
        //Fokus wieder auf das Textfeld!
        cm.focus();
    },
    //Der Klassenname wird entsprechend erweitert
    className: "fa fa-star red",
    title: "Rote Schrift",
},

Als Klassenname verwende ich hier ein Sternsymbol von fontawesome und die Erweiterung der Klasse um "red". Damit kann ich das Symbol ebenfalls rot einfärben. Man schreibt also in die Datei "simplemde.min.css" (im Unterordner "css" des Plugins) folgendes in eine neue Zeile:

a.fa.fa-star.red{color:red!important}

Der Implementierungsteil ist somit abgeschlossen! Jetzt kann man im Adminmenü im Einstellungsmenü des Plugins "SimpleMDE" in das Feld "Werkzeugleiste" unsere neue Funktion "redfont" eintragen. Und schon haben wir das Plugin um eine Funktion erweitert:

SimpleMDE Editor mit unserer Erweiterung