No information on using own emoji images along with custom emoticons database

Documentation/Product Version TinyMCE 5 Documentation

Related page URL (if applicable) https://www.tiny.cloud/docs/plugins/opensource/emoticons/

I would like to know… I don’t need the whole (default) list of emoticons, but rather a specific set which I already configured, as per https://www.tiny.cloud/docs/plugins/opensource/emoticons/#emoticons_database. Which is working well.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'emoticons',
  toolbar: 'emoticons',
  emoticons_database_url: 'https://example.com/emojis.js'
});

// emojis.js Database
tinymce.Resource.add('tinymce.plugins.emoticons', {
  /* REJSER OG STEDER */
  "Anker": {
    keywords: ['anker', 'båd', 'skib', 'skipper', 'kaptajn'],
    char: '⚓',
    category: 'travel and places'
  },
  "Bjerg": {
    keywords: ['bjerg'],
    char: '⛰️',
    category: 'travel and places'
  },
  "Solopgang": {
    keywords: ['sol', 'solopgang'],
    char: '🌅️',
    category: 'travel and places'
  },
  "Regnbue": {
    keywords: ['regnbue', 'farver'],
    char: '🌈',
    category: 'travel and places'
  },
  
  /* OBJEKTER */
  "&Aelig;delsten": {
    keywords: ['ædelsten', 'diamant', 'juvel', 'perle'],
    char: '💎',
    category: 'objects'
  },
};

The problem arises when I’m specifying the emoticons_images_url value, as per https://www.tiny.cloud/docs/plugins/opensource/emoticons/#emoticons_images_url, which contains the path to the folder where my self-hosted, custom emoji images reside. I made sure to keep the images file naming convention exactly as the default Twemoji ones.

However, my custom images won’t show up, unless I remove the emoticons_database_url parameter along with its value, and add the emoticons_database: 'emojiimages'. In which case, all the default emojis are showing up, which is against my needs of using only a specific, limited set of emojis, along with their localized names + keywords.

To sum it all up, what’s the proper way of using a specific set of emojis, while having each of them make use of a custom, self-hosted .PNG image?

Thank you.

[tylerkelly13]

Hi @roenfeldt ,

I’ll transfer this issue to the tinymce/tinymce repository so the developers can have a look into this issue.

Tyler

[roenfeldt]

@SimonFc your suggestion works! Thank you so much for helping me out. I am grateful for your help 😃

For reference, what I ended up doing, was simply using img tags within the custom database (and using CSS classes, instead of inline style), for instance:

window.tinymce.Resource.add('tinymce.plugins.emoticons', {
  "Anker": {
    keywords: ['anker', 'båd', 'skib', 'skipper', 'kaptajn'],
    char: '<img data-emoticon="true" class="mdplm-emoji" draggable="false" alt="\u2693" src="26f0.png"/>',
    category: 'travel and places'
  }
});

img.mdplm-emoji {
  width: 1em !important;
  height: 1em !important;
  margin: 0 .05em 0 .1em !important;
  display: inline !important;
  vertical-align: .1em !important;
}