TinyMCE 在设计模式下禁用链接导航答案

【问题标题】：TinyMCE disable link navigation in design modeTinyMCE 在设计模式下禁用链接导航
【发布时间】：2021-04-27 17:15:51
【问题描述】：

我想知道如何在设计模式下禁用 ctrl-clicking 链接。我相信这一定是可能的，因为当链接插件被禁用时，在“设计”模式下链接不能被 ctrl-click。我想启用链接插件，但在“设计”模式下链接保持不可点击。在“只读”模式下仍然可以单击它们。

此小提琴显示未启用链接插件时的功能。只需使用“添加链接”按钮将链接添加到编辑器，并在您处于设计模式时注意它是如何无法通过 ctrl 单击来导航的。

https://fiddle.tiny.cloud/Q6haab/3

这个小提琴启用了链接插件，以显示在编辑模式下按 ctrl 的区别。

https://fiddle.tiny.cloud/Q6haab/4

提前致谢

【问题讨论】：

标签： tinymce tinymce-5

【解决方案1】：

如果您导入链接插件，目前无法通过配置禁用链接打开行为。

TinyMCE 为click and keydown 注册事件处理程序，用于检查链接上的点击。

另外，链接插件注册了right click for opening the link上显示的菜单项。

最终这些都调用same method，它在主体上创建一个锚标记并在其上触发鼠标单击事件。

如果您希望停止单击执行任何操作，则可以将事件侦听器添加到主体标记以获取单击事件，然后过滤事件目标以查找直接位于主体上并具有 3 个属性（@ 987654324@、rel 和 target)。找到可能的候选人后，您可以在活动中致电preventDefault。

body.addEventListener('click', (evt) => {
  const t = evt.target;
  if (
      t.parentNode === body &&
      t.attributes.length === 3 &&
      t.hasAttribute('href') &&
      target.getAttribute('rel') === 'noreferrer noopener' &&
      t.getAttribute('target') === '_blank') {
    evt.preventDefault()
  }
});

【讨论】：

谢谢詹姆斯，这是我最终采用的一种变体。