suneditor-emojis

Add a Unicode Emojis submenu to the SunEditor toolbar. The plugin covers the entire Unicode standard and supports 'skin tone' where possible.

Demo ⇢ https://suneditor-emojis.github.io

The plugin comes with several useful features

• Tests for local browser support, also trims out fallbacks; by that the browsers entire range is used without showing "odd" emojis

• A built-in cache speeds up loading and rendering

Usage

Include JavaScript and CSS files from /dist :

<script src="suneditor-emojis.min.js"></script>
<link href="suneditor-emojis.css" rel="stylesheet" type="text/css">

Now add emojis to SunEditors' plugins option, and add a 'emojis' button to buttonList

const editor = SUNEDITOR.create('editor', {
  ...     
  plugins: [emojis],
  buttonList: ['emojis'],
  ...
})  

important

Add the following CSS rule to any page that shows text produced by SunEditor, but outside the SunEditor context, I.e "in production"

.se-emoji {
   font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
}

Options

If needed the dropdown can be customised in various ways through the emojis option

emojis: {
  groups: [array],
  captions: [array],
  showRecent: true,
  iconSize: 'string',
  skinTone: 'string',
  topmenu: {
    search: true,
    iconSize: true,
    skinTone: true
  },
  showFallbacks: false,
  tagName: 'span',
  width: 'string',
  height: 'string'
}

---

groups

Specifies the kind of emojis to include in the dropdown. The emojis are ordered into their official super group names (see About unicode emojis). If groups are not set, all groups are included

emojis: {
  groups: ['Smileys & Emotion', 'Activities', 'Animals & Nature', 'Flags', 
      'Food & Drink', 'Objects', 'People & Body', 'Symbols', 'Travel & Places']
  }       
}

---

captions

Group captions. By default the same as the group names. Use names as localization of emoji group names. Here an example of group captions in spanish

emojis: {
  captions: ['Sonrisas y emociones', 'Actividades', 'Animales y naturaleza', 'Banderas',	
      'Comida y bebida', 'Objetos', 'Personas y cuerpo', 'Símbolos', 'Viajes y lugares']
}

💡 An empty string '' in the array means the header should not be shown

💡 If you pass captions: false all emojis are shown continuously after each other without breaking headers

---

showRecent

When true clicked emojis are remembered (in localStorage) and shown as first choice in the dropdown

emojis: {
  showRecent: true
}

---

iconSize

The font-size of emojis shown in groups or by search

emojis: {
  iconSize: '1.5rem'
}

💡 You can also enable topmenu.iconSize and let the user choose the size for themselves.

---

skinTone 🖖 🖖🏻 🖖🏼 🖖🏽 🖖🏾 🖖🏿

Some 'People & Body' emojis can be styled with six different 'skintones': 'neutral', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'.

emojis: {
  skinTone: 'neutral'
}

💡 You can also enable topmenu.skinTone and let the user choose a skintone for themselves.

---

topmenu

Adds a semi transparent header to the dropdown containing user controls

emojis: {
  topmenu: {
    search: true,
    iconSize: true,
    skinTone: true
  }
}

search enables a tiny input form,where you can filter out emojis by their names.

---

tagName

While not strictly necessary it is recommended to wrap emojis into a HTML tag like <span>.

Most unicode emojis are displayed fine in HTML and in mixed text millieus, but the display can be suppressed if the current DOM font-family also support the unicode themselves. For example "smiling face" may be substituted with when using a helvetica font familiy.

By wrappping emojis into a tag we are sure they are rendered using a correct font family: "Noto Color Emoji", "Apple Color Emoji" or "Segoe UI Emoji".

emojis: {
  tagName: 'span'
}

---

showFallbacks

Newer emojis may have a fallback that the browser can show as substitute if the unicode is not supported. Those will often be rendered as two emojis side by side, like 🍄 🟫 as fallback for "Brown Mushroom", introduced in v15.1. The plugin hide fallbacks by default, but you can enable them by setting showFallbacks to true.

emojis: {
  showFallbacks: false
}

---

width, height

The SunEditor submenu dropdown will automatically fit the screen height and edge with the editor. You may want to reduce the height of the dropdown or increase the width.

emojis: {
  width: '50rem',
  height: '30rem'
}

About unicode emojis

As suggested above the emojis are ordered into 9 super groups :

#	group	emojis (v16.0)
😀	'Smileys & Emotion'	169
🎯	'Activities'	85
🦓	'Animals & Nature'	159
🇩🇰	'Flags'	270
🍷	'Food & Drink'	131
👑	'Objects'	264
👍	'People & Body'	386
🚫	'Symbols'	224
🚀	'Travel & Places'	218

No browser or reader will ever support the entire scope of unicode, and will never implement each and every unicode emoji correct or as intended. So the plugin will only be able to display those emojis the local browser support. The plugin automatically detects not supported emojis as well as emojis relying on fallbacks; see the showFallbacks option to enable browser fallbacks.

The website emojipedia.org has detailed insight about the major browsers (and their platforms) support of emojis over time :

platform	url	installed font
chrome	https://emojipedia.org/google	Noto Color Emoji
windows	https://emojipedia.org/microsoft	Segoe UI Emoji
apple	https://emojipedia.org/apple	Apple Color Emoji

Credits

Suneditor-emojis is a plugin made for the excellent SunEditor wysiwyg editor https://github.com/JiHong88/suneditor.

Thanks to unicode-emoji-json, https://github.com/muan/unicode-emoji-json, who maintain updated lists of all emojis.

License

Suneditor-emojis is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.