English
Get API key
Skip to article
Integrations / CKEditor 5

CKEditor 5

Colon autocomplete for CKEditor 5 on the official Mention plugin.

On this page

@emojisense/ckeditor5 adds : emoji autocomplete to CKEditor 5 (47 and later). Type :pizza and the list shows 🍕 🍄‍🟫 🍍. Type :ship it and 🚀 comes first. It is a feed on the official Mention plugin, and the chosen emoji goes in as plain text.

Install

npm install @emojisense/ckeditor5 emojisense ckeditor5

Setup

TypeScript
import { EmojisenseMention } from "@emojisense/ckeditor5";
import { ClassicEditor, Essentials, Paragraph } from "ckeditor5";
import "ckeditor5/ckeditor5.css";

await ClassicEditor.create({
  attachTo: document.querySelector("#editor"),
  licenseKey: "GPL",
  plugins: [Essentials, Paragraph, EmojisenseMention],
  emojisense: {
    packUrl: "https://api.emojisense.com/v1/pack/0.1.0",
    // Optional: meaning results from the API.
    endpoint: "https://api.emojisense.com",
    publishableKey: "pk_live_…",
  },
});

CKEditor 47 takes the element as the first argument: ClassicEditor.create(element, config). The list items use CKEditor’s own button classes, so editor themes style them.

With the official emoji picker

TypeScript
import { EmojisenseMention } from "@emojisense/ckeditor5";
import { ClassicEditor, EmojiPicker, Essentials, Paragraph } from "ckeditor5";

await ClassicEditor.create({
  attachTo: document.querySelector("#editor"),
  licenseKey: "GPL",
  // EmojiPicker for browsing; not Emoji or EmojiMention, which bring their own ":" feed.
  plugins: [Essentials, Paragraph, EmojiPicker, EmojisenseMention],
  toolbar: ["emoji"],
  emojisense: { packUrl: "https://api.emojisense.com/v1/pack/0.1.0" },
});

Options (config.emojisense)

OptionDefaultNotes
packUrl—Base URL of a pack version. Set it or engine.
engine—A ready engine instead of a pack URL
localethe content languagept-br becomes pt. English always loads too.
cultureUrlnext to packUrlCulture files, for cultural and seasonal emoji after the best match. false turns them off.
regionthe device’sRegion for regional culture entries: the device’s (its language, else its time zone), "" for none, or an ISO code such as "JP"
endpoint—The Emojisense API. Without it, search stays on the device.
publishableKey—A pk_… key. Never put a secret key in a browser.
semantic—A semantic provider instead of endpoint
skinTone—light, medium-light, medium, medium-dark or dark
limit8List size

Behaviour

InputResult
: and two charactersThe list opens. :) and :D stay text.
12:30, https://No list: the colon must follow a space, a bracket or the line start
:ship itSpaces are allowed, up to four words
↑ ↓, Enter, Tab, EscapeThe Mention plugin’s keys

When the dictionary is unsure and the API is configured, the list waits up to 600 ms for results by meaning. Because packUrl is a plain string, CMS integrations that configure CKEditor with YAML or PHP (Drupal, Craft CMS) can pass the options without code.