如何让插入到CKEditor链接内的元素继承链接属性？

问题场景 #

开发CKEditor插件时，通过HTML字符串插入自定义元素：

<span class="link">Link</span>

使用官方推荐流程插入：

const viewFragment = this.editor.data.processor.toView(markup);
const modelFragment = this.editor.data.toModel(viewFragment);
this.editor.model.insertContent(modelFragment);

普通场景运行正常，但插入到已有链接内时，链接会被拆分为三段：

<a href="URL">This is a </a><span class="link">Link</span><a href="URL"> inside link</a>

预期结果应为自定义元素嵌套在链接内部：

<a href="URL">This is a <span class="link">Link</span> inside link</a>

已配置模型元素的upcast/downcast规则，且通过allowAttributesOf: '$text'继承了文本的所有属性（包括linkHref），但直接插入到链接内时仍失败；而先插入元素再拖拽到链接内，或用<a>标签包裹元素后插入，都能正常嵌套。

问题原因 #

直接插入的模型片段本身没有携带当前插入位置的linkHref属性，尽管配置了属性继承，但insertContent默认不会自动将上下文的链接属性应用到插入的元素节点上。CKEditor的模型合并逻辑会把无链接属性的元素视为独立节点，从而拆分原有链接。

解决方案 #

方案1：手动继承上下文的链接属性

在插入前获取当前选区的linkHref属性，为模型片段中的所有节点添加上该属性：

const markup = '<span class="link">Link</span>';
const viewFragment = this.editor.data.processor.toView(markup);
const modelFragment = this.editor.data.toModel(viewFragment);

// 获取当前插入位置的链接属性
const selection = this.editor.model.document.selection;
const linkHref = selection.getAttribute('linkHref');

if (linkHref) {
  // 遍历模型片段的所有节点，添加linkHref属性
  modelFragment.getChildren().forEach(node => {
    if (node.is('element')) {
      node.setAttribute('linkHref', linkHref);
      // 递归处理子文本节点（如果需要）
      node.getChildren().forEach(child => {
        if (child.is('text') || child.is('textProxy')) {
          child.setAttribute('linkHref', linkHref);
        }
      });
    }
  });
}

this.editor.model.insertContent(modelFragment);

方案2：启用插入时的自动合并选项

使用insertContent的mergeBefore和mergeAfter参数，强制插入内容与前后同属性的链接节点合并：

const markup = '<span class="link">Link</span>';
const viewFragment = this.editor.data.processor.toView(markup);
const modelFragment = this.editor.data.toModel(viewFragment);

this.editor.model.insertContent(modelFragment, {
  mergeBefore: true,
  mergeAfter: true
});

注意：此方法要求插入位置前后的节点必须带有相同的linkHref属性，否则可能会意外合并其他无关节点。

方案3：调整模型元素的嵌套规则

确保自定义模型元素被明确允许在链接元素内嵌套，修改模型注册代码：

editor.model.schema.register('customLinkSpan', {
  allowWhere: '$text',
  allowAttributesOf: '$text',
  // 明确允许作为link元素的子节点
  allowIn: 'link'
});

同时检查downcast转换器，确保正确处理嵌套结构：

editor.conversion.for('downcast').elementToElement({
  model: 'customLinkSpan',
  view: (modelElement, { writer }) => {
    return writer.createContainerElement('span', { class: 'link' });
  }
});

补充说明 #

拖拽元素到链接内正常是因为CKEditor在节点移动时会自动继承目标位置的上下文属性；用<a>包裹插入正常是因为upcast过程会直接将整个结构解析为link元素包含自定义元素，自然不会触发链接拆分逻辑。

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