faz-quill-emoji v0.1.3

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/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>


<!-- Module Faz quill emoji -->
<link
  rel="stylesheet"
  href="https://unpkg.com/faz-quill-emoji@0.1.3/dist/faz.quill.emoji.css"
  type="text/css"
/>
<script src="https://unpkg.com/faz-quill-emoji@0.1.3"></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

Methods

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