CKEditor5转换配置：如何将生成的img标签包裹在带指定href的a标签内

实现方案 #

你可以直接在现有逻辑基础上，先创建<a>容器元素，再将图片元素插入到<a>内部后再插入到视图位置即可，修改后的可运行代码如下：

editor.conversion.for('downcast').add(dispatcher => {
    dispatcher.on('insert:imageBlock', (evt, data, conversionApi) => {
        const { writer: viewWriter } = conversionApi;
        // 创建a标签容器，可自定义属性
        // 如果href存储在imageBlock的自定义模型属性中，可通过data.item.getAttribute('自定义href属性名')动态取值
        const linkWrapper = viewWriter.createContainerElement('a', {
            href: '你的自定义href值',
            target: '_blank' // 可选附加属性，按需配置
        });
        // 原有img元素创建、模型绑定逻辑不变
        const viewImage = viewWriter.createEmptyElement('img');
        conversionApi.mapper.bindElements(data.item, viewImage);
        // 将img插入到a标签内部
        viewWriter.insert(viewWriter.createPositionAt(linkWrapper, 0), viewImage);
        // 把带图片的a标签插入到目标视图位置
        const insertPosition = conversionApi.mapper.toViewPosition(data.range.start);
        viewWriter.insert(insertPosition, linkWrapper);

        evt.stop();
    });
});

附加说明 #

如果需要支持后续动态修改图片关联的href属性时同步更新视图，可额外添加属性转换规则：

editor.conversion.for('downcast').add(dispatcher => {
    dispatcher.on('attribute:href:imageBlock', (evt, data, conversionApi) => {
        const { writer: viewWriter } = conversionApi;
        const viewImage = conversionApi.mapper.toViewElement(data.item);
        const linkWrapper = viewImage.parent;
        if (linkWrapper && linkWrapper.is('element', 'a')) {
            viewWriter.setAttribute('href', data.attributeNewValue, linkWrapper);
        }
    });
});

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