我使用tinyMCE文本编辑器与一些预先填充的内容。内容是一个段落数,我希望其中一个段落(一个div)是不可编辑和不可删除的。我使用了tinyMCE nonEditable插件,但如果我选择所有文本或将光标放在段落下方并点击删除按钮,它将删除。我想一定有一些JS知道什么时候它被选中,在按下- backspace键时,它会阻止删除那个段落(div)。
ldxq2e6h1#
你会遇到的问题(以及为什么这不是有人已经解决的问题)是有很多方法可以“删除”的东西。你可以
因此,在现实中,要真正使某些内容不可删除,您需要解决任何可能的情况,其中操作将覆盖不可编辑的部分沿着任何情况下,按键将删除不可编辑的部分。TinyMCE确实提供了各种各样的事件,如keypress,BeforeSetContent和change,这可能有助于实现这一点,但捕捉所有边缘情况是细节中的魔鬼,这使得这非常困难。如果你只想停止使用BSPACE和DEL,你可以捕捉按键,看看什么是即将被删除,如果你不想发生这种情况,停止按键。
keypress
BeforeSetContent
change
oxcyiej72#
解决方法是增加keydown、paste事件监听器,并检查用户是否按下删除或退格键,或用户选择多个单词后是否按下任意键。cut事件不能被preventDefault,所以你应该检查用户ctrl+x keydown,然后使用复制+删除用户操作。下面是一些例子
let start = rng.startContainer; const selection = document.getSelection(); const startDiv = getParentDiv(start); const endDiv = getParentDiv(end); let range = document.createRange(); const firstText = getFirstChildText(endDiv.firstChild); if (firstText) { // 可能并没有text range.setStart(firstText, 0); range.setEnd(end, rng.endOffset); selection.removeAllRanges(); selection.addRange(range); editor.execCommand('Delete'); }
2条答案
按热度按时间ldxq2e6h1#
你会遇到的问题(以及为什么这不是有人已经解决的问题)是有很多方法可以“删除”的东西。你可以
因此,在现实中,要真正使某些内容不可删除,您需要解决任何可能的情况,其中操作将覆盖不可编辑的部分沿着任何情况下,按键将删除不可编辑的部分。
TinyMCE确实提供了各种各样的事件,如
keypress
,BeforeSetContent
和change
,这可能有助于实现这一点,但捕捉所有边缘情况是细节中的魔鬼,这使得这非常困难。如果你只想停止使用BSPACE和DEL,你可以捕捉按键,看看什么是即将被删除,如果你不想发生这种情况,停止按键。
oxcyiej72#
解决方法是增加keydown、paste事件监听器,并检查用户是否按下删除或退格键,或用户选择多个单词后是否按下任意键。cut事件不能被preventDefault,所以你应该检查用户ctrl+x keydown,然后使用复制+删除用户操作。
下面是一些例子