Faz Quill Emoji

Faz Quill Emojis is a module that provides the functionality to easily add emojis to the Quill rich text editor with support for multiple open-source emoji collections such as: openmoji, twemoji, noto, fluent-emoji, fluent-emoji-flat, fluent-emoji-high-contrast, noto-v1, emojione, emojione-monotone, emojione-v1, fxemoji, streamline-emojis always prioritizing being lightweight and powerful.

| | | | |---|---|---|

Demo online

Quickstart

Installation

Install with npm:

npm i faz-quill-emoji

Use as ES6 module (recommended):

Manual Registration:

import Quill from 'quill';
import RegisterFazQuillEmoji from "faz-quill-emoji";

RegisterFazQuillEmoji(Quill);

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: {
            container: ['bold', 'italic', 'underline', 'strike', 'faz-emoji'],
            handlers: {
                'faz-emoji': true  
            },
        },
        fazEmoji: {
            collection: 'fluent-emoji'
        }
    }
});

Automatic registration:

import Quill from 'quill';
import "faz-quill-emoji/autoregister";

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: {
            container: ['bold', 'italic', 'underline', 'strike', 'faz-emoji'],
            handlers: {
                'faz-emoji': true  
            },
        },
        fazEmoji: {
            collection: 'fluent-emoji'
        }
    }
});

Import styles

Styles are present under

import "faz-quill-emoji/dist/faz.quill.emoji.css";

Not using a package manager or bundler?

Use the standalone files like this:

<!-- Quill editor core -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>


<!-- Module Faz quill emoji -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/faz.quill.emoji.css"
  type="text/css"
/>
<script src="https://unpkg.com/[email protected]"></script>

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

<script>
    const quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: ['bold', 'italic', 'underline', 'strike', 'faz-emoji'],
                handlers: {
                    'faz-emoji': true  
                },
            },
            fazEmoji: {
                collection: 'fluent-emoji'
            }
        }
    });
</script>

Examples

All the examples described are in the Demo folder

1. Basic
2. Popper Positioning
3. Open the drop-down menu from outside the editor
4. A beautiful collection of 'twemoji' emojis
5. A beautiful collection of 'fluent-emojis' emojis

Example options

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: {
            container: ['bold', 'italic', 'underline', 'strike', 'faz-emoji'],
            handlers: {
                'faz-emoji': true  
            },
        },
        fazEmoji: {
            collection: 'fluent-emoji', 
            rewriteCDNURL(url) {
                return url;
            },
            popperOptions: null,
            popper: window.Popper
        }
    }
});

Options

| name | type | description | |---------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | collection | string | Collection of emoji to display. Allowed values: 'native' , 'openmoji' , 'twemoji' , 'noto' , 'fluent-emoji' , 'fluent-emoji-flat' , 'fluent-emoji-high-contrast' , 'noto-v1' , 'emojione' , 'emojione-monotone' , 'emojione-v1' , 'fxemoji' , 'streamline-emojis'. Default: 'native' | | popper | object | The popper library for more advanced drop-down menu positioning. | | popperConfig | object | Specify Popper's custom options. This gives you full control over the drop-down positioning. See Popper's docs for more details. | | rewriteCDNURL(url) | function | Emoji images, with the exception of 'native', come from a cdn if you want to rewrite this url you must use this option. asynchronous functions are accepted |

Methods

You may retrieve the module from Quill like quill.getModule('fazEmoji') then call one of the imperative methods below.

| method | description | |----------|--------------------------| | openMenu | Open the drop-down menu. |