[英]Why document.execCommand not working in reactjs?
我正在嘗試在我的反應項目中創建簡單的所見即所得編輯器,但不能正常工作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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.