Digitalagentur für Business Software aus Kiel

Native "Apple like"-Emojis als Plugin in den CKEditor integrieren

Veröffentlicht von Henrik Braune am 27.10.2016

Henrik Braune

Der CKEditor (ehemals Aloha) ist ein vielseitig einsetzbarer Rich-Text-Editor (RTE) und wird in unzähligen Projekten und Open-Source-Plattformen für die Bearbeitung von Inhalten eingesetzt. Mit unserem Plugin können jetzt auch native Unicode-Emojis in einem Dialog ausgewählt werden.

Emojis und der CKEditor

Der CKEditor verfügt über eine flexible Plugin-Architektur, die dazu genutzt werden kann, den Editor um Funktionalitäten zu erweitern. In einem aktuellen Kundenprojekt im thematischen Umfeld von Messaging und Chat-Bots setzen wir den CKEditor dazu, die Nachrichten eines Bots zu bearbeiten. In diesem Zusammenhang bestand die Anforderung, auch die beliebten Emojis (Smileys) innerhalb des Editors auszuwählen. Die Emojis sollten innerhalb der Datenbank als Shortcode, in der App und im Backend jedoch als natives Unicode-Zeichen (also ein Bild-Ersatz) angezeigt werden. Weil es die Funktionalität noch nicht als Plugin für den CKEditor gab, haben wir ein solches entwickelt und auf Github veröffentlicht sowie bei Bower registriert.

Hier kannst du das Plugin in einer Demo sehen.

So nutzt du das Plugin

Das Plugin setzt als Abhängigkeiten den CKEditor selbst voraus sowie die emojione-Bibliothek. Achtung: Wenn du emojione in deinem Projekt nutzen möchtest, musst du das Projekt auf deiner Webseite verlinken. Beide Pakete können zusammen mit dem Plugin über bower installiert werden:

bower install ckeditor
bower install emojione
bower install ckeditor-emojione

Anschließend kannst du das Plugin im Editor registrieren. Hier ein Beispiel der HTML-Datei:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="bower_components/emojione/lib/js/emojione.js"></script>
        <script src="bower_components/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor" id="editor" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                CKEDITOR.plugins.addExternal('emojione', '../../bower_components/ckeditor-emojione/', 'plugin.js');
                CKEDITOR.config.extraPlugins = 'emojione';
                CKEDITOR.replace( 'editor' );
            </script>
        </form>
    </body>
</html>
Registrierung des Plugins

Das Ergebnis ist: Ein zusätzlicher Button in der Toolbar, der bei Klick einen Dialog öffnet. In diesem wiederum haben wir in den aus Slack oder iOS bekannten Tabs die Emojis gelistet:

 

Unser Plugin erhältst du auf Github oder der offiziellen CKEditor Seite.

© 2017, Braune Digital GmbH, Niemannsweg 69, 24105 Kiel, +49 (0) 431 55 68 63 59