how to translate emoji from unicode
Closed this issue · 10 comments
sorry to disturb you.
I store emoji content into database but receive message like this
\ud83d\ude2f\ud83d\ude36\ud83d\ude42\ud83d\ude44
how do i translate it to emoji?
Is any suggestion for me ?
thank you.
ok,it is a wonderful component.I know how to solve it.
thank you.
how could you display it ?
Use CoolTextArea but no flag to set edit disable.
Or store <img draggable="false" alt="😄" src="https://twemoji.maxcdn.com/2/72x72/1f604.png" class="emoji"> and use img label?
thank you very much.
hello, @kevinfaguiar
I find the implementation is used img label in source code.
Would you like to support a component to display use unicode like \ud83d\ude2f\ud83d\ude36\ud83d\ude42\ud83d\ude44
so that I can show it directly from server?
And I find it could be displayed perfectly if the content.sync is assigned unicode.
<cooltextarea :content.sync="content" :emojiData="emojiDataAll" :emojiGroups="emojiGroups" @enterKey="onEnterKey" ref="cooltextareaRef"></cooltextarea>
But no flag to disable editable.
Is there any suggestion?
Thank you.
hello, @kevinfaguiar
I find the implementation is usedimglabel in source code.
Would you like to support a component to display use unicode like\ud83d\ude2f\ud83d\ude36\ud83d\ude42\ud83d\ude44
so that I can show it directly from server?
And I find it could be displayed perfectly if thecontent.syncis assigned unicode.
<cooltextarea :content.sync="content" :emojiData="emojiDataAll" :emojiGroups="emojiGroups" @enterKey="onEnterKey" ref="cooltextareaRef"></cooltextarea>But no flag to disable editable.
Is there any suggestion?
Thank you.
Hello,
The textarea already outputs to the correspondent Emoji Unicode in the 'content' prop through an update event to the parent, so you should save in server the 'content' variable from the parent. This format, in plain string "\ud83d\ude2f\ud83d\ude36\ud83d\ude42\ud83d\ude44" are the UTF-16 surrogate pairs of the emoji, and outputting to surrogate pairs is not currently supported by the parser of this emoji picker.
Also, about the possibility of disabling the textarea so you could use it for display, I find it a good suggestion of improvement.
It is pleasure to hear from you.So any suggestion from you if I would like to display the content from server?
Thank you.
You can import the Twemoji and use its parser to parse the string from your server, which will convert the emoji Unicode to its correpondent emoji art, like:
import twemoji from 'twemoji';
twemoji.parse(yourServerStringHere); // RESULT = Your string with emoji unicodes converted to IMG artsAlso, I will mark this issue so I can develop some improvements: expose a method to parse the String with emoji unicode back to a String with IMG tags so you can use it like this:
SCRIPT
const serverEmojiUnicodeString = getStringFromApi();
const stringWithImgToDisplay = this.$refs.cooltextarea.parseToTwemoji(serverEmojiUnicodeString);HTML TEMPLATE
<div v-html="stringWithImgToDisplay"></div>And add a disable property to the CoolTextArea so you can use the component for displaying data.
Thank you.And another tip is the emoji icon may be not showed either if set disabled of textarea.
Thank you for your nice work very much.It is so helpful for me.
Hello @ruoshui1314...
About exposing a method to parse the string to Twemoji I think it is not in this component scope... But since this component imports Twemoji you can achieve your desired result with a code like:
import twemoji from 'twemoji';
twemoji.parse(yourServerStringHere); // RESULT = Your string with emoji unicodes converted to IMG artsAs for the possibility of disabling the textarea, I'm currently developing this feature along others improvements and will commit soon.
hello @kevinfaguiar I did it using method from twemoji early.
Nice to hear from you.
It is now possible to disable the textarea and the emoji picker, so check the docs to get to know how to do. The options are available from version @4.0.0 onwards.