gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:09:43 24 4
gpt4 key购买 nike

我正在尝试在我的 React 项目中创建简单的所见即所得编辑器,但无法正常工作 document.execCommand

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

有可能在reactjs中创建简单的所见即所得编辑器吗?

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

关于javascript - 为什么 document.execCommand 在reactjs中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61130062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com