Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Emoji picker on a text field.

Add an emoji picker to your textareas

Ben Long

July 5th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

Emoji picker demo

VIEW

Emojis are now such an essential part of how we communicate that we simply can’t afford to leave them out of our applications. They add an extra dimension to how we express ourselves in our day-to-day interactions that can be otherwise difficult to do with text only 😜

Thankfully, you can add an emoji picker to any textarea or input element in your applications in just two steps with the world’s most popular open source WYSIWYG HTML editor, TinyMCE; and it’s easily integrated with JavaScript and popular frameworks like React, Angular, Vue, Bootstrap, jQuery, and Rails.

In this article, we’ll start with a simple example, demonstrating how to convert a regular textarea into the WYSIWYG component with an emoji picker, followed by additional tips on using it and how to take it further.

Default emoji picker in TinyMCE.

Start with a simple example

Let’s work through an example, starting with a simple HTML form with a single textarea.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <h1>Emoji picker example</h1>
    <form method="post">
      <textarea id="mytextarea">ASCII art is great, but...</textarea>
    </form>
  </body>
</html>

1. Add the TinyMCE script

Add the following code to the <head> of your HTML, replacing no-api-key with your own Tiny API key. If you don’t already have one, you can get a free API key now. (It also comes with a 30-day trial of our premium plugins!)

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

2. Initialize TinyMCE on the textarea

Now initialize TinyMCE on the textarea by adding the following code to the <head> of your HTML, where the selector option refers to the id of the textarea you’re augmenting, in this case, mytextarea.

<script>
  tinymce.init({
    selector: "#mytextarea",
    plugins: "emoticons",
    toolbar: "emoticons",
    toolbar_location: "bottom",
    menubar: false
  });
</script>

The plugins and toolbar options indicate which plugins to load and which options should be available on the toolbar, respectively. Although TinyMCE can be configured with loads of functionality, in this case, we’re only making use of the emoticons plugin. We’ve also set the location of the toolbar to the bottom of the frame and removed the TinyMCE menubar.

That’s all there is to it! In place of the regular textarea, you now have a WYSIWYG component with an emoji picker.

Adding the emoji picker to React and other popular frameworks

TinyMCE is easily integrated with your favorite frameworks (including, for example, React, Angular, Vue, Bootstrap, …). Check out our detailed guides to some of the most popular integrations:

There’s also more information about integrations in our docs.

Customizing the emoji picker

Every year, The Unicode Consortium releases new emojis for us all to enjoy. For instance, this year, 117 new emojis were introduced. However, these don’t always make it into every emoji picker straight away.

Fortunately, you can add custom emojis to TinyMCE with a little extra configuration. You can also restrict the emoji set if needed.

Check out our comprehensive guide to the emoticon plugin for more information.

Working with the WYSIWYG editor

Now that you’ve replaced the textarea with our WYSIWYG editor, you’ll probably want to know more about how to configure it to get the most out of it. Firstly, you may want to know how to set its dimensions and how to access its content.

Setting the editor dimensions

Dimensions can be set in the initialization script; for example:

<script>
  tinymce.init({
    /* … */
    height: 450,
    width: 450
  });
</script>

Getting text from the editor

Retrieve the contents of the editor using getContent(); for example:

tinymce.get("mytextarea").getContent();

Because TinyMCE is an HTML editor, the content is retrieved as HTML by default; however, you can get it as text only with:

tinymce.get("mytextarea").getContent({ format: "text" });

Find out more information about TinyMCE in the Tiny docs, including how to set content and get content. We've also written an article on how to get content and set content in TinyMCE.

Why limit your user options to emojis?

TinyMCE is highly flexible and can fit almost any use case where you require text entry in your apps; for instance, recently, we customized TinyMCE with several user options and integrated it with a real-time chat app.

Real-time chat app with TinyMCE WYSIWYG editor and emoji picker.

What next?

Now that you have an emoji picker in your applications, adding more of the functionality provided by TinyMCE is as easy as adding a couple of lines of code. See the full list of core and premium plugins available, and our related article on how to customize the TinyMCE toolbar.

TinyMCE with custom skin and icons, and toolbar options grouped on the bottom.

Emoji picker demo

VIEW
DesignEmoticons
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor