Emojis have truly come a long way for the past years from how it started to simply just expressions form and created out of punctuations. Today’s emojis, which originated way back in the 1800s, have continued to add up and grow in popularity. Emojis make everyday conversation fun, and it has truly become a huge part of everyday language and expression.
We can’t simply leave out the emojis of our applications. Nowadays, emojis became an essential part of our conversations and the way we converse and communicate with everyone. Expressing ourselves in everyday interactions has more depth and an extra dimension to it with emojis. The way we convey what we feel and what we want to say is made more fun and exciting rather than plain texts.
Thankfully, with TinyMCE, you can easily input emoji pickers to your applications or in any text area with just 2 steps. TinyMCE is known as the world’s most popular open-source WYSIWYG Editor, and it is easily integrated with popular frameworks such as Vue, Angular, Bootstrap, React, Rails, and jQuery. This open-source WYSIWYG editor is also integrated with JavaScript.
This article will be discussing how to convert regular text areas into the WYSIWYG component with the emoji picker. Here we will start with a simple example of how to do so, and then will be followed by essential tips on using it and how is it possible to take it further.
The Simple Example
To start simple, we will begin by working through an example with a simple HTML form that has a single text area. Here, you will see that it can easily be done with just 2 steps!
Add first the TinyMCE Script
Add the code of your HTML that would be provided by Tiny. Replace as well “No API Key” area with your own API key. If you still don’t have an API key, get a free API key first. This will also come along with a 30-day free trial of plugins.
On the Text Area, Initialize TinyMCE
Adding again another code to your HTML, initialize TinyMCE. Here, your selector option is referring to the id of the text area that you are augmenting.
Toolbar and plugin features are the options that indicate which to be available and which plugins to load on the toolbar. In this case, the only thing made use of is the emoticons plugin. Though TinyMCE is not capable of just this, it can be configured for loads of functionality. Tiny also set placed the toolbar location to the bottom of the frame and remove as well the TinyMCE menu bar.
Adding the Emoji Picker to the Integrated Popular Frameworks
The additional great news is that you can add the emoji picker to whichever is your favorite framework with just a few steps. There are additional details about their integration found exclusively on Tiny. Here as well are some of the detailed contents all about some of Tiny’s popular integrations.
- Using WYSIWYG Editor to enhance Bootstrap forms
- Rich Text Editors as used for enhancing react forms
- Using the Rich Text Editor to create an Angular reactive form
- Adding the rich text editor to a simple Vue project
Customizing the Emoji Picker
This year, there are a total of 117 freshly added emojis, just like every year that emojis add up. With the Unicode Consortium adding new emojis each year, of course, everyone wants to find and include it to their emoji picker straight away.
Luckily, TinyMCE allows you to add custom emojis with just a little extra configuration. If needed, the emoji set can be restricted as well. In order to know more about emoticon plugins, you should check out their comprehensive guide to these plugins and no further information on this as well.
Working with the TinyMCE WYSIWYG editor
Now that you have already learned about replacing the text area with the TinyMCE, now you must know how to configure the editor in order to get the most out of it. Here in this part, what will be discussed is how to access its contents and how to set TinyMCE WYSIWYG editor’s dimensions.
To set the Editor Dimensions
The initialization script provided by Tiny will be the one to help with setting the dimensions. An example of an initialization script is this:
<script>
tinymce.init({
/* … */
height: 450,
width: 450
});
</script>
Getting the Text from the Editor
Use getContent to retrieve the contents of the editor. getContent is a feature that gets contents from the editor, which cleans up the content before getting it. The content that will be retrieved is automatically HTML by default since it is given that TinyMCE is an HTML Editor. However, this is how you get it as text only:
tinymce.get(“mytextarea”).getContent({ format: “text” });
In the Tiny Docs, you will find more detailed information about TinyMCE, which will also include how-tos in getting content and setting content. Tiny also created an article which discusses setting content and how to get content in TinyMCE.
Why Limit User Options to Emojis?
Now, limiting user options to emojis only is possible because of TinyMCE, along with the promise that you can do a lot more. TinyMCE is a highly flexible open-source WYSIWYG editor that can fit almost any instances of using when required text entry to your applications. Recently as well, TinyMCE customized multiple user options and have integrated it with a newly developed real-time chat app.
What Now?
Now that you have learned all about adding an emoji picker into your applications, it is the right time to know more about TinyMCE can offer and do. Adding more TinyMCE functionalities is made easy because all you need to do is add a couple of lines of codes, and you will be good to go! Tiny has a long list of premium and core plugins, along with contents and articles which will let you in on comprehensive guides on using TinyMCE, the world’s most popular open-source editor.
