Heute stelle ich euch einen wahnsinnig einfachen WYSIWYG Editor vor, den ihr in euren eigenen Projekten einsetzen könnt! Das Javascript ist absolut überschaubar und beläuft sich nur auf etwa 15 Zeilen (je nach Formatierung). Der Original-Beitrag stammt von barneyparker.com und wurde mir von einem Arbeitskollegen gezeigt – absolut sehenswert!

Der ganz eigene HTML WYSIWYG Editor

Im Grunde benötigt euer Browser nur die beiden folgenden Funktionen: Das HTML5 Attribut „contentEditable“ und die Javascript Funktion „execCommand„. Das „contentEditable“ Attribut hatte ich euch vor etwa zwei Monaten vorgestellt, die Javascript Funktion ist allerdings neu.

execCommand

Diese Funktion wird verfügbar, wenn ein Element einer HTML Seite im „Design“-Modus ist (durch „contentEditable“). Sie erlaubt es einem bestimmte Befehle auszuführen, die den Inhalt des Elementes verändern können. Es gibt verschiedene Befehlsformen – Einige verändern selektierte Bereiche (z.B. zum fett oder kursiv setzen), andere erstellen komplett neue Elemente (für Links oder Listen).
Die Funktion erwartet drei Parameter:

• CommandName (string) – Beinhaltet den Namen des Befehls (wie z.B. ‚formatBlock‚, ‚bold‚, ‚copy‚, ‚paste‚, ‚undo‚ usw.).
• ShowDefaultUI (boolean) – Entscheidet ob die Browser-UI dargestellt werden soll. Dieser Parameter wurde aktuell noch nicht implementiert.
• ValueArgument (string | null) – Wird für einige Befehle benötigt. Wird kein Argument benötigt muss „null“ übergeben werden.

Eine genaue Dokumentation (inklusive aller Befehle) zu dieser Funktion findet ihr auf developer.mozilla.org.

Der Aufbau

Im grunde brauchen wir nur folgende Elemente:

• Knöpfe für unsere Steuer-Elemente (Fett, Kursiv, Liste, …)
• Ein Element, welches als Editor dient

Im Beispiel von barneyparker.com wird Bootstrap für eine hübsche GUI verwendet… Es kann aber auch so aussehen:

<div id="controls">
   <button type="button" data-role="undo">Undo</button>
   <button type="button" data-role="redo">Redo</button>
   <button type="button" data-role="cut">Cut</button>
   <button type="button" data-role="copy">Copy</button>
   <button type="button" data-role="paste">Paste</button>
   <button type="button" data-role="bold"><b>Bold</b></button>
   <button type="button" data-role="italic"><em>Italic</em></button>
   <button type="button" data-role="underline"><u>Underline</u></button>
   <button type="button" data-role="strikeThrough"><strike>Strike</strike></button>
   <button type="button" data-role="justifyLeft">Align left</button>
   <button type="button" data-role="justifyCenter">Align left</button>
   <button type="button" data-role="justifyRight">Align right</button>
   <button type="button" data-role="justifyFull">Justify</button>
   <button type="button" data-role="indent">Indent</button>
   <button type="button" data-role="outdent">Outdent</button>
   <button type="button" data-role="insertUnorderedList">Unordered list</button>
   <button type="button" data-role="insertOrderedList">Ordered list</button>
   <!-- Format functions... -->
   <button type="button" data-role="h1">Headline</button>
   <button type="button" data-role="h2">Second headline</button>
   <button type="button" data-role="p">Paragraph</button>
</div>
<div id="editor" contenteditable></div>

Wobei natürlich grade Bootstrap mit den ganzen schönen Icons sehr viel angebrachter ist als die nativen Browser-Knöpfe 😉 Bitte beachtet die „data-role“ Attribute auf allen Buttons.

Das Javascript

Kommen wir zum Herzstück des Editors… Und wie bereits gesagt, das Skript beläuft sich auf sehr wenige Zeilen!

// jQuery example.
$(function() {
   $('#controls button').click(function() {
      var command = $(this).data('role');
      switch(command) {
         case 'h1':
         case 'h2':
         case 'p':
            document.execCommand('formatBlock', false, '<' + command + '>');
            break;
         default:
            document.execCommand(command, false, null);
            break;
      }
   });
});

Eine Sache fällt am Skript allerdings auf… Wie kommt es, das nie auf das ‚editor‚ Element zugegriffen wird? An dieser Stelle passiert ein wenig Magie… Der Browser wird nämlich selbstständig den Befehl für das aktive Element oder den selektierten Inhalt ausführen – Es kann nämlich jeweils nur ein Element geben, das aktiv ist oder selektierten Inhalt besitzt.

Und ehrlich gesagt war es das schon! Wer hätte gedacht das es so einfach wäre einen simplen WYSIWYG Editor zu entwickeln? Bitte beachtet, das dieser Editor wohl nur mit aktuellen Browsern gut läuft. Einige Browser, speziell die der mobilen Geräten, haben zwar u.U. Probleme mit dem Editor, doch das ist ein anderes Thema.

Ich hoffe ich konnte euch diese Woche was interessantes neues zeigen und würde mich freuen wenn ihr auch nächste Woche wieder vorbei schaut! Bis dahin wünsche ich euch eine angenehme Woche und natürlich Happy Coding!