テキストエリアにインラインemojisを挿入する（EmojiOne）

Question

私はチャットコンポーザーコンポーネントを使用して、メッセージを入力してemojisを追加することができます。私は<EmojiPicker />コンポーネントを持っています。このコンポーネントは、絵文字の:shortname:でコールされるコールバックを持っています。

例：

emojiPickerCallback(shortname) { 
     let input = ReactDOM.findDOMNode(this.refs.textInput).value; 
     let output = emojione.shortnameToImage(input + shortname); 
     ReactDOM.findDOMNode(this.refs.textInput).value = output; 
} 

<EmojiPicker callback={this.emojiPickerCallback.bind(this)} /> 

問題は、この意志の出力だけではなく、絵文字の、テキストエリアに次のように、次のとおりです。

<img class="emojione" alt="" title=":zipper_mouth:" src="https://cdn.jsdelivr.net/emojione/assets/png/1f910.png?v=2.2.7"/>

私は、インラインを取得するために何をする必要がありますどのようなEmojiOneを使用してemojiesをtextareaにしますか？

Answer 1

enojioneはHTMLタグの束であり、textareaはそれをレンダリングできません（テキストエリアにはプレーンテキストのみを表示できます）。

htmlタグを表示できる適切なコンテナでtextareaを置き換えてください。たとえば、TinyMCE、CKEditor、Quill、Trumbowyg、または他の軽量WYSIWYG htmlエディタ（何百というもの）