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)} />

问题是，这会将以下内容输出到textarea中，而不仅仅是表情符号：

<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编辑器（数百个）

将内联表情符号插入textarea（EmojiOne）

1 个答案: