Popups

Custom Emoticons

Using the emoticons.min.js plugin you can insert emoticons in the WYSIWYG HTML editor.

Try it yourself:

There are 2 options that can be used to customize the insert emoticon popup:

• emoticonsStep - The number of emoticons displayed on a line in the insert emoticon popup.
• emoticonsSet - An array of emoticons available in the insert emoticon popup.

Edit in JSFiddle

HTML

Copy

<div id="froala-editor"></div>

JAVASCRIPT

Copy

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['bold', 'italic', 'emoticons'],
    emoticonsStep: 4,
    emoticonsSet: [{
      id: 'people',
      name: 'Smileys & People',
      code: '1f600',
      emoticons: [
        { code: '1f600', desc: 'Grinning face' },
        { code: '1f601', desc: 'Grinning face with smiling eyes' },
        { code: '1f602', desc: 'Face with tears of joy' },
        { code: '1f603', desc: 'Smiling face with open mouth' },
        { code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
        { code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
        { code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
        { code: '1f607', desc: 'Smiling face with halo' }
      ]
    }, {
    'id': 'nature',
    'name': 'Animals & Nature',
    'code': '1F435',
    'emoticons': [
      { code: '1F435', desc: 'Monkey Face' },
      { code: '1F412', desc: 'Monkey' },
      { code: '1F436', desc: 'Dog Face' },
      { code: '1F415', desc: 'Dog' },
      { code: '1F429', desc: 'Poodle' },
      { code: '1F43A', desc: 'Wolf Face' },
      { code: '1F431', desc: 'Cat Face' },
      { code: '1F408', desc: 'Cat' },
      { code: '1F42F', desc: 'Tiger Face' },
      { code: '1F405', desc: 'Tiger' },
      { code: '1F406', desc: 'Leopard' },
      { code: '1F434', desc: 'Horse Face' },
      { code: '1F40E', desc: 'Horse' },
      { code: '1F42E', desc: 'Cow Face' },
      { code: '1F402', desc: 'Ox' },
      { code: '1F403', desc: 'Water Buffalo' },
      ]
    }]
  })
</script>