带有emoji-mart(选取器组件)的window.getSelection()出现问题

Question

我的代码：

addEmoji = () => {
document.getElementById('description-text').focus();
let element = $("#span").clone()[0];
let sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
let range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(element);
let textNode = document.createTextNode('u00A0');
range.setStartAfter(element);
range.insertNode(textNode);
range.setStartAfter(textNode);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<div id="description-text" ref="description" suppressContentEditableWarning="true" contentEditable={true} />                    
<div>
<button type="submit">Guardar Cambios</button>
</div>
</form>
<div>
{this.state.emojiPanel ? 
<div>
<button type="button" onClick={this.switchEmojiPanel}>Hide Emojis</button>
<Picker onClick={this.addEmoji} set='emojione' emojiSize={26} title="Select Emoji" color="#000" /> 
<span id="span">INSERT</span>
</div>
:
<div>
<button type="button" onClick={this.switchEmojiPanel}>Select Emojis</button>
</div>
}
</div>
</div>
)
}

问题是，当用户单击表情符号时，当试图在div中插入span时，window.getSelection((不会获取我在div中的位置值，因为我从另一个组件(即Picker(调用该函数，然后span总是插入在div的开头。

如果有人能帮我做这件事，我真的很感激！！

Answer 1

您可以使用cssuser-select属性来实现这一点。使用user-select: none;属性设置您在Picker组件内单击的元素的样式。

这样，当用户单击Picker组件中的表情符号时，插入符号位置或文本选择将保留在您的contentEditablediv.中

请确保检查兼容性，以使其在不同的浏览器中正常工作：https://developer.mozilla.org/en-US/docs/Web/CSS/user-select