为什么document.execCommand在reactjs中不起作用

Question

我正试图在我的react项目中创建简单的wysiwyg编辑器，但无法使用document.execCommand、

我指的是codepen(他们在这里使用jQuery库来实现点击功能(

有没有可能在reactjs中创建简单的wysiwyg编辑器？

//document.addEventListener("click", function (e) {});
const wrapTag = (role) => {
switch(role) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, role);
break;
default:
document.execCommand(role, false, null);
break;
}
}
<div onClick={ () => { wrapTag("bold") } }>bold</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet saepe nostrum aspernatur deserunt rem neque ab.</p>

Answer 1

您应该添加一个event.preventDefault，以保持焦点：

const wrapTag = (role) => {
document.designMode = "on"
switch(role) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, role);
break;
default:
document.execCommand(role, false, null);
break;
}
}
<div onClick={ () => wrapTag("bold") } onMouseDown={(event) => 
event.preventDefault()}>bold</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet saepe nostrum aspernatur deserunt rem neque ab.</p>