Search code examples
javascripthtmlangularckeditor

How to convert entered text into emoji

I was developing a social networking application using angular technology. I have used CKEditor free version to implement some of the core application features like those below.,

  1. Creating a new post component enter image description here

  2. Render component enter image description here

I couldn't find the way to convert (user entered) symbols ;) :( :) to emojis in HTML div tag

If anyone knows please guide me on it

Solution

  • If I understand your question clearly, you want to display emoticons on the webpage when users enter their symbol in the textarea. This can be done using an inbuilt text editor plugin like TinyMCE. But if you want to try the native way, the simple funda here is: These emoticon characters are available as Unicode decimal or hexadecimal codepoints when used with UTF-8, a default charset used on webpages. To get a list of smileys hexadecimal code points, refer to this: https://www.unicode.org/charts/PDF/U1F600.pdf

    To display any special character on the webpage, we use '&#x<hexa_code_point>' or '&#<dec_code_point>'.

    For eg,

    🙂 = 🙂

    &#x1F612 = 😒

    &#x1F634 = 😴

    so you will need a map between a string entered in your textarea and this code. For eg,

    {
 ':|': "1F610"
}

    and then corresponding to that code point, we can display smiley.

    For reference, https://codesandbox.io/s/vibrant-lehmann-ibvncy?file=/index.html