将内联表情符号插入文本区域 (EmojiOne)答案

【问题标题】：Inserting inline emojis into a textarea (EmojiOne)将内联表情符号插入文本区域 (EmojiOne)
【发布时间】：2016-12-16 19:21:09
【问题描述】：

我有一个聊天编辑器组件，用户可以在其中键入消息并添加表情符号。我有一个<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？

【问题讨论】：

您找到解决方案了吗？看起来 Artem Dudkin 的回答是正确的。

标签： javascript reactjs emojione

【解决方案1】：

看起来答案是“你无能为力”，因为 enojione 是一堆 HTML 标签，而 textarea 无法呈现它（textarea 只能显示纯文本）。

请将 textarea 替换为可以呈现 html 标签的适当容器。例如，TinyMCE、CKEditor 或 Quill 或 Trumbowyg 或其他轻量级的所见即所得 html 编辑器（数百个）

【讨论】：