Javascript 为什么document.execCommand不能在reactjs中工作?
我正在尝试在react项目中创建简单的wysiwyg编辑器,但没有使用document.execCommand 我指的是他们在这里使用jQuery库来实现点击功能 有没有可能在reactjs中创建简单的所见即所得编辑器Javascript 为什么document.execCommand不能在reactjs中工作?,javascript,reactjs,wysiwyg,Javascript,Reactjs,Wysiwyg,我正在尝试在react项目中创建简单的wysiwyg编辑器,但没有使用document.execCommand 我指的是他们在这里使用jQuery库来实现点击功能 有没有可能在reactjs中创建简单的所见即所得编辑器 //document.addEventListener("click", function (e) {}); const wrapTag = (role) => { switch(role) { case 'h1':
//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>
应添加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>
问题在于单击会失去焦点并将焦点放在按钮上;但是运气不好,你能给我看看代码兄弟吗@我尝试了您的代码,但在添加role=>event.时未调用此函数@AdamYou还必须更改onClick={wrapTagbold},以便wrapTag可以接收事件click Fn worked但not worked脚本,当我单击粗体按钮选择移除时,这意味着html重新呈现?更改了我的答案,现在如何?基于此,还应将document.designMode=on设置为