TinyMCE emoticons: add a searchable emoji picker and check what gets saved

In an original community-center bulletin, an author wants a seedling beside “Garden orientation.” Readers still need those words: an icon alone cannot explain which event is scheduled or whether registration is open.

Add the picker to the intended editor

For a page that already loads the appropriate TinyMCE distribution and contains a textarea with ID bulletin:

tinymce.init({
  selector: '#bulletin',
  plugins: 'emoticons',
  toolbar: 'undo redo | bold italic | emoticons',
  emoticons_append: {
    garden_orientation: {
      keywords: ['garden', 'orientation', 'seedling'],
      char: '🌱'
    }
  }
});

This original entry makes the seedling discoverable with the bulletin's own vocabulary. The Unicode character may already exist in the default catalog; appending it with custom keywords can therefore create another searchable entry for that character. That is useful only when the added terms help authors find it.

Open the toolbar picker and search for “orientation.” Select the intended result, then continue with the words “Garden orientation.” The plugin also supports colon-triggered search while typing. Test the actual author's selection and insertion point so a picker choice does not land in a different paragraph.

Separate a Unicode character from an image asset

With the default emojis database, the inserted character is text. Its appearance depends on the reader's font and platform. A bulletin cannot depend on the seedling having exactly the same colors or shape on every device.

The optional emojiimages database uses Twemoji images instead. The current documentation identifies the image source and its CC-BY 4.0 license, and provides emoticons_images_url for self-hosted assets. Follow the applicable attribution requirements when adopting that route. An image-based choice adds an asset-loading concern that Unicode text does not have.

Inspect the saved content to know which representation the installation actually produced. The TinyMCE HTML extraction guide covers getting the editor value. A stored emoji character and an image URL need different downstream handling; neither should be inferred from how the picker button looks.

Diagnose a missing catalog before changing the document

If the toolbar button is absent, confirm both plugin loading and the toolbar identifier in the configuration used for that editor instance. If the dialog opens without usable results, inspect the emoji database request and browser console. Loading the plugin script and loading its database are separate observations.

emoticons_database_url points to a JavaScript database resource. A custom resource must register the expected tinymce.plugins.emoticons resource; a plain JSON file is not the documented replacement. Use the official resource format and the bundling method for the installed release.

When only image emoji fail, inspect the configured image base URL and the actual requests. A missing image does not require replacing the whole editor. Avoid changing already-authored bulletin text while diagnosing a database path or blocked asset request.

Keep the announcement understandable without the symbol

For the garden bulletin, save one line containing the seedling and the event name. Reopen it in the reader view and check the wording, spacing, and character. If an email or another export is part of the real delivery route, check that output too; the editor's successful insertion does not prove every downstream renderer handles it identically.

Keep dates, eligibility, and registration state as explicit text. Searching for “orientation” is an authoring convenience. It does not attach event metadata to the seedling, and changing that emoji later should not silently change the event's status.

For an object that genuinely needs an identity and structured saved data, the custom embedded-reference guide explains that separate modeling decision. The bulletin needs a simpler result: readers can identify Garden orientation even if their device draws the seedling differently.