自定义react-quill链接格式后无法编辑链接，求解决方法

我为React-Quill自定义了链接格式，代码实现了对外部链接自动添加target="_blank"和rel="noopener noreferrer"，但添加链接后无法像默认格式那样点击打开编辑框修改链接地址。

自定义Blot代码如下：

class LinkBlot extends Inline {
  static create(value) {
    let node = super.create();

    node.setAttribute("href", value);

    if (/^(https?:)?\/\//.test(value)) {
      node.setAttribute("target", "_blank");
      node.setAttribute("rel", "noopener noreferrer");
    }

    return node;
  }

  static formats(node) {
    return node.getAttribute("href");
  }
}

LinkBlot.blotName = "link";
LinkBlot.tagName = "a";

Quill.register("formats/link", LinkBlot);

问题原因 #

自定义Blot完全重写了默认的link格式，但没有实现默认链接的交互逻辑——默认Quill会给链接节点绑定点击事件，阻止跳转并唤起编辑弹窗。

解决方案 #

方案1：基于默认LinkBlot扩展（推荐）

这种方式既保留自定义的属性处理逻辑，又能继承默认的交互能力：

import Quill from 'quill';
const LinkBlot = Quill.import('formats/link');

class CustomLinkBlot extends LinkBlot {
  static create(value) {
    let node = super.create(value);
    // 保留自定义的target和rel处理
    if (/^(https?:)?\/\//.test(value)) {
      node.setAttribute("target", "_blank");
      node.setAttribute("rel", "noopener noreferrer");
    }
    return node;
  }
}

// 第三个参数true表示覆盖原有注册的格式
Quill.register('formats/link', CustomLinkBlot, true);

方案2：完全自定义Blot+手动绑定交互逻辑

如果必须完全重写Blot，需要手动给链接添加点击交互：

const quill = new Quill('#editor', { /* 你的编辑器配置 */ });

quill.root.addEventListener('click', (e) => {
  const linkNode = e.target.closest('a');
  if (linkNode) {
    e.preventDefault();
    // 定位链接对应的选区
    const blot = quill.scroll.find(linkNode);
    const offset = quill.scroll.offset(blot);
    quill.setSelection(offset, blot.length());
    // 唤起默认的链接编辑弹窗
    quill.format('link', linkNode.getAttribute('href'), 'user');
  }
});

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