Quill Emoji Selector
Module extension for Quill.js that handles emojis in the toolbar. Through this extension, you can add emojis through the toolbar at the top, or by typing the emoji code.
To add an emoji via emoji code, type :
followed by the first few letters, and an autocomplete menu will appear. You can then select or tab
to the preferred emoji.
This module is still in active development
Installation
yarn add quill-emoji
Usage
Webpack/ES6
const toolbarOptions = container: 'bold' 'italic' 'underline' 'strike' 'emoji' handlers: {}const quill = editor // ... modules: // ... toolbar: toolbarOptions "emoji-toolbar": true "emoji-textarea": true "emoji-shortname": true ;
Examples
- Classic HTML/JS
- AngularJS using ng-quill
Options
See emoji-list.js for emoji list example
Example options
// Custom emoji-listconst emojiList = /* emojiList */ ; // MDI emojicon instead of default iconconst emojiIcon = '<svg class="i" viewBox="0 0 24 24"><use href="#emoticon-happy"></use></svg>'; const quill = editor // ... modules: // ... "emoji-shortname": emojiList: emojiList fuse: shouldSort: true threshold: 01 location: 0 distance: 100 maxPatternLength: 32 minMatchCharLength: 1 keys: "shortname" { /* ... */ } { /* ... */ } "emoji-toolbar": buttonIcon: emojiIcon "emoji-textarea": buttonIcon: emojiIcon ;
Custom Emoji Blot
If you need to display the emojis in a different way, you can customize the emoji blot by creating a new blot or extending the default emoji blot.
New emoji blot
; const Embed = Quill; // Customized version of src/format-emoji-blot.js // ... EmojiBlotblotName = 'emoji';EmojiBlottagName = 'span'; Quill;
Contributing
Please check out our contributing guidelines. )