Blueprint by Tiny
Return to
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add an emoji picker to the textarea

Ben Long

May 17th, 2022

Written by

Ben Long


How-to Use TinyMCE

Emoji picker demo


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.

How to configure text editor with emoji support

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

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

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 14-day trial of our premium plugins!)

<script src="" 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.

    selector: "#mytextarea",
    plugins: "emoticons",
    toolbar: "emoticons",
    toolbar_location: "bottom",
    menubar: false

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 selector 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.

Get Your Free TinyMCE API Key →

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:

    /* … */
    height: 450,
    width: 450

Getting text from the editor

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


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

DesignEmoticonsEmail Marketing
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • How-to Use TinyMCE

    How to set up a CMS editor with TinyMCE Cloud

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

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
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.


  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing