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 https://github.com/tommoor/emojione-picker/issues/42, or mute the thread https://github.com/notifications/unsubscribe-auth/AAXP8mGsrJCj7cxz4XEAfU3L1mcl80kTks5q2DqLgaJpZM4Kc1zn .

Tom Moor

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