- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
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.
HTML
<div id="froala-editor"></div>
JAVASCRIPT
<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>
Related Plugin: Emoticons