Account
Menu

Redactor

Emoji

Add emoji by clicking the button on the toolbar or type a colon (:) in the content.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/emoji/emoji.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['emoji']
        });
        </script>
    </body>
</html>

Usage

By default, the plugin has a ready-made set of preset and frequently used emoji in the form of an object divided into groups: 


items: {
    favorites: {
        faceTearsJoy: '😂',
        ...
    },
    smileys: {
        slightlySmilingFace: '🙂',
        ...
    },
    ...
}

You can expand the emoji object:


Redactor('#entry', {
    plugins: ['emoji'],
    emoji: {
        items: {
            favorites: {
                faceScreamingFear: '😱',
                moneyBag: '💰'
            }
        }
    }
});

Or replace it completely with your object: 


Redactor('#entry', {
    plugins: ['emoji'],
    emoji: {
        items: {
            set: true,
            favorites: {
                faceScreamingFear: '😱',
                moneyBag: '💰'
            }
        }
    }
});

By default, the dropdown menu with emoji is called when you type the ':' character, you can change this: 


Redactor('#entry', {
    plugins: ['emoji'],
    emoji: {
        trigger: '%'
    }
});

By default, the plugin adds its button to the toolbar and context bar. To remove it from the context bar, disable the context setting: 


Redactor('#entry', {
    plugins: ['emoji'],
    emoji: {
        context: false
    }
});