jquery tinyMCE -不可删除的div

hwamh0ep  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(236)

我使用tinyMCE文本编辑器与一些预先填充的内容。内容是一个段落数,我希望其中一个段落(一个div)是不可编辑和不可删除的。我使用了tinyMCE nonEditable插件,但如果我选择所有文本或将光标放在段落下方并点击删除按钮,它将删除。我想一定有一些JS知道什么时候它被选中,在按下- backspace键时,它会阻止删除那个段落(div)。

ldxq2e6h

ldxq2e6h1#

你会遇到的问题(以及为什么这不是有人已经解决的问题)是有很多方法可以“删除”的东西。你可以

  • 按DEL或BKSPACE键
  • 使用任何TinyMCE API插入/设置内容,这些内容将覆盖包含不可编辑部分的选择
  • 单击TinyMCE工具栏按钮或菜单选项,当您的选择包括不可编辑的部分时,该按钮或菜单选项将插入/覆盖内容
  • 当您的选择包含不可编辑的部分时,将内容复制/粘贴到编辑器中

因此,在现实中,要真正使某些内容不可删除,您需要解决任何可能的情况,其中操作将覆盖不可编辑的部分沿着任何情况下,按键将删除不可编辑的部分。
TinyMCE确实提供了各种各样的事件,如keypressBeforeSetContentchange,这可能有助于实现这一点,但捕捉所有边缘情况是细节中的魔鬼,这使得这非常困难。
如果你只想停止使用BSPACE和DEL,你可以捕捉按键,看看什么是即将被删除,如果你不想发生这种情况,停止按键。

oxcyiej7

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');
}

相关问题