Example To Insert The Emoji to Text Input/Textarea

[agungsb]

Hi, how to actually insert the emoji to the text input/textarea?

My current project is using this plugin to pick emoji. Whenever user pick the emoji, the following function is triggered:

this.addEmoji(data.unicode);

 addEmoji(text) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const txt = '&#x' + text + ';';
    console.log(txt);
    console.log(selection);
    console.log(contentState);
    let nextEditorState = EditorState.createEmpty();
    if (selection.isCollapsed()) {
      const nextContentState = Modifier.insertText(contentState, selection, txt);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    } else {
      const nextContentState = Modifier.replaceText(contentState, selection, text);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    }
    this.onChange(nextEditorState);
  }

I use the DraftJS for the editor. Whenever I pick the emoji, the unicode is inserted to the editor but it doesn't display the emoji (it displays the raw unicode instead). Is there a step I am missing in using the emoji? Or is it the problem with DraftJS?

Thanks.

[tommoor]

It depends on the support of your operating system and browser if you insert the unicode straight into a text field. As draftJS is built on React/HTML you would be better to insert an actual image I think...

Take a look at this plugin that you could use alongside or instead of this picker:
https://www.draft-js-plugins.com/plugin/emoji

[tommoor]

It depends on the support of your operating system and browser if you
insert the unicode straight into a text field. As draftJS is built on
contenteditable you would be better to insert an actual image I think...

Take a look at this plugin that you could use alongside or instead of this
picker:
https://www.draft-js-plugins.com/plugin/emoji

On Thu, Oct 20, 2016 at 9:07 PM, Agung Surya Bangsa <
notifications@github.com> wrote:

Hi, how to actually insert the emoji to the text input/textarea?

My current project is using this plugin to pick emoji. Whenever user pick
the emoji, the following function is triggered:

this.addEmoji(data.unicode);

addEmoji(text) {
const { editorState } = this.state;
const selection = editorState.getSelection();
const contentState = editorState.getCurrentContent();
const txt = '&#x' + text + ';';
console.log(txt);
console.log(selection);
console.log(contentState);
let nextEditorState = EditorState.createEmpty();
if (selection.isCollapsed()) {
const nextContentState = Modifier.insertText(contentState, selection, txt);
nextEditorState = EditorState.push(
editorState,
nextContentState,
'insert-characters'
);
} else {
const nextContentState = Modifier.replaceText(contentState, selection, text);
nextEditorState = EditorState.push(
editorState,
nextContentState,
'insert-characters'
);
}
this.onChange(nextEditorState);
}

I use the DraftJS for the editor. Whenever I pick the emoji, the unicode
is inserted to the editor but it doesn't display the emoji (it displays the
raw unicode instead). Is there a step I am missing in using the emoji? Or
is it the problem with DraftJS?

Thanks.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#42, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXP8mGsrJCj7cxz4XEAfU3L1mcl80kTks5q2DqLgaJpZM4Kc1zn
.

Tom Moor

http://tommoor.com
http://twitter.com/tommoor