TinyMCE

Colon autocomplete for TinyMCE 7 and 8, in place of the emoticons menu.

On this page

@emojisense/tinymce adds : emoji autocomplete to TinyMCE 7 and 8. Type :pizza and the menu shows 🍕 🍄‍🟫 🍍. Type :ship it and 🚀 comes first. It uses TinyMCE’s own autocompleter, so the menu looks like the rest of the editor.

Install

npm install @emojisense/tinymce emojisense tinymce

pnpm add @emojisense/tinymce emojisense tinymce

yarn add @emojisense/tinymce emojisense tinymce

bun add @emojisense/tinymce emojisense tinymce

Setup

import "tinymce";
import "tinymce/models/dom";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import { registerEmojisense } from "@emojisense/tinymce";
import tinymce from "tinymce";

registerEmojisense(tinymce);

await tinymce.init({
  selector: "#editor",
  license_key: "gpl",
  plugins: "emojisense",
  emojisense_pack_url: "https://api.emojisense.com/v1/pack/0.1.0",
  // Optional: meaning results from the API.
  emojisense_endpoint: "https://api.emojisense.com",
  emojisense_publishable_key: "pk_live_…",
});

<script src="https://cdn.jsdelivr.net/npm/tinymce@8/tinymce.min.js"></script>
<script>
  tinymce.init({
    selector: "#editor",
    license_key: "gpl",
    external_plugins: {
      emojisense: "https://cdn.jsdelivr.net/npm/@emojisense/tinymce/dist/plugin.min.js",
    },
    emojisense_pack_url: "https://api.emojisense.com/v1/pack/0.1.0",
  });
</script>

With a script tag, pin exact versions in both URLs and add integrity attributes in production. With the emoticons plugin loaded, Emojisense takes over its : menu; the emoticons dialog and toolbar button stay.

Options

Option	Default	Notes
`emojisense_pack_url`	—	Base URL of a pack version. Set it or `emojisense_engine`.
`emojisense_engine`	—	A ready engine instead of a pack URL
`emojisense_locale`	the editor’s `language`	`tr_TR` becomes `tr`. English always loads too.
`emojisense_culture_url`	next to the packs	Culture files, for cultural and seasonal emoji after the best match. `"off"` turns them off.
`emojisense_region`	`"device"`	Region for regional culture entries: the device’s (its language, else its time zone), `""` for none, or an ISO code such as `"JP"`
`emojisense_endpoint`	—	The Emojisense API. Without it, search stays on the device.
`emojisense_publishable_key`	—	A `pk_…` key. Never put a secret key in a browser.
`emojisense_skin_tone`	—	`light`, `medium-light`, `medium`, `medium-dark` or `dark`
`emojisense_limit`	`8`	Menu size
`emojisense_replace_emoticons`	`true`	Take over the emoticons plugin’s `:` menu

Keyboard

Input	Result
`:` and two characters	The menu opens. `:)` and `:D` stay text.
`12:30`, `https://`	No menu: the colon must start a word
`:ship it`	Spaces are allowed while the menu is open, up to four words
↑ ↓, Enter	Move through the menu, insert the emoji
Escape	Close the menu and keep the text

TinyMCE looks up the query 50 ms after the last keystroke and keeps a space in the query only while the menu is open. When the dictionary is unsure and the API is configured, the menu waits up to 600 ms for results by meaning.

Your own autocompleter

createAutocompleter returns the spec for editor.ui.registry.addAutocompleter, for code that registers its own:

TypeScript

import { createAutocompleter } from "@emojisense/tinymce";
import { createSuggestionSource } from "emojisense/autocomplete";

const source = createSuggestionSource({ engine, minQueryLength: 2, includeCustom: false });

editor.ui.registry.addAutocompleter("emoji", createAutocompleter({
  source: () => source,
  insert: (range, emoji) => {
    editor.selection.setRng(range);
    editor.insertContent(emoji);
  },
}));

WordPress’s classic editor runs TinyMCE 4, which has no autocompleter API. The WordPress plugin covers it with a toolbar button.