[英]Why document.execCommand not working in reactjs?
I am trying to create simple wysiwyg editor in my react projects but not working document.execCommand
,我正在尝试在我的反应项目中创建简单的所见即所得编辑器,但不能正常工作
document.execCommand
,
I am referring codepen (They used jQuery library here for click function)我指的是codepen (他们在这里使用jQuery库来实现点击功能)
Any possible to create simple wysiwyg editor in reactjs?有没有可能在 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>
You should add an event.preventDefault
, to keep the focus:您应该添加一个
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.