CKEDITOR：监听光标进出链接标签事件及检测异常问题

我需要监听光标是否位于链接标签内的事件（即工具栏中链接按钮高亮所触发的事件），尝试了以下代码：

const selection = editor.model.document.selection;
const hasElLinkHrefAttr = selection.hasAttribute('linkHref');
console.log("element has linkHref attribute > ", hasElLinkHrefAttr);

这段代码在通过左右箭头按键移动光标时能正确返回true或false，但存在两个问题：

• 点击定位光标时，返回的是之前存储的值；
• 在链接文本的首尾位置检测异常。

想了解工具栏中的链接按钮是如何实现正确检测并高亮的？

工具栏链接按钮的正确检测逻辑，核心是绑定实时选择变更事件+精准判断光标上下文元素，以下是具体实现方式：

1. 监听选择变更事件（解决点击光标不更新的问题）
   你当前的代码大概率只执行了一次，没有在选择变化时重新检测。需要绑定编辑器的选择变更事件，确保每次光标移动、点击定位都触发检测：

editor.model.document.selection.on('change', () => {
  const selection = editor.model.document.selection;
  const isInLink = checkCursorInLink(selection);
  console.log("是否位于链接内 > ", isInLink);
  // 这里可以同步更新自定义按钮的高亮状态
});

2. 精准判断光标上下文（解决首尾位置检测异常）
   selection.hasAttribute()仅能检测选区自身的属性，当光标处于链接文本的首尾边界时，选区可能处于节点间隙，此时需要检查光标前后的元素：

function checkCursorInLink(selection) {
  // 若为选中文本，直接检查选区属性
  if (!selection.isCollapsed) {
    return selection.hasAttribute('linkHref');
  }
  // 若为单个光标，检查前后节点是否属于链接元素
  const position = selection.getFirstPosition();
  const nodeBefore = position.nodeBefore;
  const nodeAfter = position.nodeAfter;

  return (
    selection.hasAttribute('linkHref') ||
    (nodeBefore && nodeBefore.hasAttribute('linkHref')) ||
    (nodeAfter && nodeAfter.hasAttribute('linkHref'))
  );
}

3. 复用编辑器内置命令状态（最简便的方式）
   编辑器内置的链接按钮会通过内置命令自动维护状态，你可以直接监听命令的isActive变化，完全对齐内置按钮的逻辑：

const linkCommand = editor.commands.get('link');
linkCommand.on('change:isActive', (evt, prop, isActive) => {
  console.log("链接按钮是否高亮 > ", isActive);
  // 同步你的自定义逻辑
});

内容的提问来源于stack exchange，提问作者Suraj Agrawal