CKEditor5 v5.16 程序化添加链接时ID与Class属性丢失问题求助

问题原因 #

CKEditor5 默认会过滤掉链接元素（<a>）未被许可的属性，id 和 class 不在链接插件的默认允许列表中，因此转换为模型内容时会被自动丢弃。

解决方案 #

需要通过编辑器配置，扩展链接元素的 schema 许可属性，并确保数据处理器保留这些属性：

1. 扩展 Schema 允许属性 #

在编辑器初始化时，修改 schema 配置，让链接元素支持 id 和 class：

ClassicEditor.create(document.querySelector('#editor'), {
  // 其他插件和配置...
  schema: {
    extend: '$link', // 扩展默认的链接模型元素
    allowAttributes: ['id', 'class'] // 添加需要保留的属性
  }
})

2. 配置数据处理器保留属性 #

同时配置数据处理器的 HTML 过滤器，确保这些属性在转换过程中不被过滤：

ClassicEditor.create(document.querySelector('#editor'), {
  // 其他插件和配置...
  dataProcessor: {
    htmlFilter: {
      elements: {
        a: element => {
          // 保留id属性
          if (element.attributes.id) {
            element.attributes.id = element.attributes.id;
          }
          // 保留class属性
          if (element.attributes.class) {
            element.attributes.class = element.attributes.class;
          }
          return element;
        }
      }
    }
  }
})

3. 完整初始化示例 #

将两者结合，完整的编辑器初始化代码如下：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [LinkPlugin],
    schema: {
      extend: '$link',
      allowAttributes: ['id', 'class']
    },
    dataProcessor: {
      htmlFilter: {
        elements: {
          a: element => {
            if (element.attributes.id) {
              element.attributes.id = element.attributes.id;
            }
            if (element.attributes.class) {
              element.attributes.class = element.attributes.class;
            }
            return element;
          }
        }
      }
    }
  })
  .then(editor => {
    console.log('Editor initialized', editor);
  })
  .catch(error => {
    console.error(error.stack);
  });

验证插入代码 #

你的插入代码无需修改，只要编辑器配置正确，id 和 class 属性就会被保留：

let content = '<a href="#" id="1234" class="lnkGoto">a link</a>&nbsp;';
const htmlDP = editor.data.processor;
const viewFragment = htmlDP.toView(content);
const modelFragment = editor.data.toModel( viewFragment );
editor.model.insertContent(modelFragment);

此时插入的链接会完整保留 id="1234" 和 class="lnkGoto" 属性。

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