如何在内容可编辑div中放置/粘贴光标所在位置的内容

Question

我是react的新手。我有一个内容可编辑的div，我想要的是创建一个按钮，在按钮上点击->"HEY"Word将被添加。假设我的内容长度是100，我点击了最初的5个字符，并给出了空间，然后点击粘贴按钮。所以这个" HEY"内容将被追加到该位置。

我代码:

renderValue = () => {
var textNode = document.createTextNode("HEY");
let p1 = document.getElementById('work').focus();
p1.appendChild(textNode)
}
render(){
<button onClick={() => this.renderValue()}>Paste</button>
<div id="work" onClick={(e)=>e.stopPropagation()}  
contentEditable 
onInput={this.emitChange}
dangerouslySetInnerHTML={{__html: this.props.html}}
>
</div>
}

我试着添加文本，但没有成功。

任何帮助都是非常感激的。提前谢谢。

Answer 1

document.execCommand()可以和insertText一起使用。像

document.execCommand("insertText", false, "HEY!!")