wwalc/ckeditor5-emoji

A simple plugin that inserts unicode emoji into CKEditor 5, created during a hackathon.

CKEditor 5 emoji feature

This package implements the emoji feature for CKEditor 5.

The plugin was created during hackathon, it is roughly based on the source code of the link plugin. It basically inserts Unicode emoji into the editor at the current cursor position.

CKEditor 5 compatibility

The plugin was built on top of the latest stable version of CKEditor 5 (v11.0.1).

😎 Enabling the emoji plugin

Since this is a third-party plugin, it is not enabled by default in CKEditor 5 and has to be added to it manually. For more information check the official documentation about creating custom builds.

To install it, run:

npm install --save @wwalc/ckeditor5-emoji

When updating the build configuration use the following:

• @wwalc/ckeditor5-emoji/src/emoji – plugin import path
• Emoji – plugin name
• emoji – toolbar item (button)

Development environment

To enable the plugin you amy also setup a local development environment and build a custom editor there.

Configuration

The list of Emojis is configurable via config.emoji:

import Emoji from '@wwalc/ckeditor5-emoji/src/emoji';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            Essentials,
            Paragraph, Heading, Bold, Italic, List, Emoji
        ],
        emoji: [
            { name: 'smile', text: '😀' },
            { name: 'wink', text: '😉' },
            { name: 'cool', text: '😎' },
            { name: 'surprise', text: '😮' },
            { name: 'confusion', text: '😕' },
            { name: 'crying', text: '😢' }
        ],
        toolbar: [ 'heading', 'undo', 'redo', 'bold', 'italic', 'emoji' ]
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );

Support

The plugin comes with no support. However if you find it useful, feel free to submit an issue and/or send a pull request.

License

Licensed under the GPL, LGPL and MPL licenses, at your choice. For full details about the license, please check the LICENSE.md file.

ckeditor5-emoji's Issues

Make emoji box responsive

Hi,

Thank you for creating this plugin. It works well except 1 thing. I've added 18 emoji to the plugin.

On desktop, it works fine. But on mobile screen size, it doesn't responsive.

Can you make it responsive? Or at least limit the number of emoji per row (maybe 5-6 emoji per row)

Thank you.

Add a better icon

Add a screenshot to README.md

More icon like in the emoji plugin on ckeditor v4

Hi, how can i add other icons to the plugin by default ?

Not compatible with ckeditor5 v11

Console log:

plugincollection-plugin-name-conflict: Two plugins with the same name were loaded. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-plugincollection-plugin-name-conflict
Object
plugin1: function()
plugin2: function()
pluginName: "ContextualBalloon"
Object Prototyp

I try to use the emoji plugin for the ckeditor5 v11.

I lost the style for the toolbar and the dropdown menus like alignment are defect.

Check compatibility with 1.0.0-alpha.3

Currently the plugin works only with the latest development version of CKEditor, it does not work with 1.0.0-alpha.2. To check if it will work with 1.0.0-alpha.3 once its released.

Add svgRule exclude in the docs

It would be good to add the following line in the Enabling the emoji plugin docs
svgRule.exclude.add(path.join(__dirname, 'node_modules', '@wwalc'));

Will save some time for developers like myself in figuring this out.