5

Does anyone know of a good way of handling emojis in a rich text field?

I'm aware that is possible to copy and paste them into one, but does anything along the lines of an emoji 'button' (i.e. to sit in the toolbar with a dropdown of categorised emojis) exist? Other suggestions welcome! Just keen to avoid the extra steps of having to find the emoji on an external source, copy, and paste in to the field.

A reference point would be Slack's 'emoji menu'.

Improve this question

2 Answers 2

Reset to default
3

It looks like Redactor has a plugin called “Clips” that allows you to:

Create a dropdown of frequently used "snippets" of code, text, icons, emoji, you name it.

Pixel and Tonic made it into a plugin for Craft too. I haven’t tried either but it looks like it should do the trick. I just tried the Craft plugin and it worked out pretty good. It doesn't have a preview of the emoji like Slack’s emoji menu though.

The plugin has settings where you can define the clips and the following HTML with each clip. Pretty straightforward.

Clips plugin settings

After installing it I edited one of the .json config files in craft/config/redactor/ directory by adding 

"plugins": ["clips"]

It then gives you a button on the tool bar called Clips. Make sure your Rich Text field is set to use the config that you added this plugin to.

toolbar with Clips plugin installed

Clicking that button gives you the following list. Clicking on a clip will insert the corresponding HTML

Clips list in Rich Text field

Not as polished as Slack’s emoji menu. Might be a way to edit the plugin to get it to do that though.

Improve this answer
1
  • Thanks, this is really helpful! And thanks so much for the thorough explanation and screenshots. I do feel like this is still quite a way off from being a complete solution for handling emojis in RTE fields (partly in terms of the limited number this could realistically handle without a large amount of per-project admin and also from a UI point of view, in terms of not seeing the actual emoji, and lots of scrolling), and also I'm guessing from a look at Redactor Clips that if you were using it you could only define one clip set per site) so I won't mark 'accepted' but I've upvoted. Thanks!
    – Mike Vaux
    Commented Jan 9, 2017 at 9:48
1

Windows and macOS support "emoji picker" palettes, out of the box:

  • Windows: Press Windows Key + .
  • macOS: Press Control + Command + Space
  • iOS: Use the Emoji key in the bottom-left corner of your on-screen keyboard.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.