在文本区域中插入内联表情符号(EmojiOne)

Question

我有一个聊天编辑器组件，用户可以在其中键入消息和添加表情符号。我有一个<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的内联表情添加到textarea中，我需要做些什么

Answer 1

看起来答案是“你什么也做不了”，因为enojione是一堆HTML标签，而textarea不能渲染它(textarea只能显示纯文本)。

请将textarea替换为可呈现html标记的适当容器。例如，TinyMCE，CKEditor或者Quill或者Trumbowyg或者其他轻量级的WYSIWYG html编辑器(成百上千)