CKEditor 5 自定义<doppio-block>元素upcast/downcast预加载渲染异常问题

DevOps 小满

2026-9-25

问题修复方案

1. 修正upcast转换配置

你当前的upcast规则需要同时匹配doppio-block元素名和doppio-block类名才会触发转换，一旦预加载的HTML结构不满足匹配条件，就会被CKEditor当成未知元素处理，导致结构异常。调整规则提升优先级，避免被通用转换逻辑覆盖：

conversion.for('upcast').elementToElement({
    model: 'doppio-block',
    view: {
        name: 'doppio-block',
        classes: 'doppio-block'
    },
    // 提升转换优先级，防止被默认规则覆盖
    converterPriority: 'high'
});

额外提示：你代码中dataDowncast的注释标注错误，dataDowncast是Model转输出HTML的过程，upcast才是输入HTML转Model的过程，避免后续搞混逻辑。

2. 确认Schema声明合规

必须在Schema中明确doppio-block的合法结构，允许内部嵌套对应子元素：

// 注册schema规则
schema.register('doppio-block', {
    inheritAllFrom: '$block',
    // 替换为你实际定义的内部子元素model名
    allowChildren: ['doppioBlockTitle', 'doppioBlockBody']
});

3. 放行自定义元素过滤规则

CKEditor默认会过滤未识别的自定义元素，需要在编辑器初始化配置中添加放行规则：

ClassicEditor.create(document.querySelector('#editor'), {
    // 其他原有配置
    htmlSupport: {
        allow: [
            {
                name: 'doppio-block',
                classes: 'doppio-block',
                attributes: true
            }
        ]
    }
})