CkEditor 5内联编辑器中GeneralHtmlSupport允许元素未按预期生效

算力阿峰

2026-7-24

解决CKEditor 5 Inline编辑器GHS过滤标签无效的问题

核心问题分析

Inline编辑器的内容处理逻辑和Classic编辑器存在差异，默认粘贴行为或关联插件（如Link插件）可能会绕过GHS的过滤规则，导致标签未被过滤。

具体解决方案

明确禁止标签
修改你的GHS配置，在disallow数组中直接添加对<a>标签的禁止规则，避免正则匹配的潜在问题：

var htmlSupport = {
    allow: [
        { name: 'br', classes: false, styles: false },
        { name: 'em', classes: false, styles: false },
        { name: 'i', classes: false, styles: false },
        { name: 'small', classes: false, styles: false },
        { name: 'sup', classes: false, styles: false },
        { name: 'sub', classes: false, styles: false },
        { name: 'u', classes: false, styles: false }
    ],
    disallow: [
        { name: /[\s\S]+/, attributes: { key: /^contenteditable$/ } },
        { name: 'a' } // 直接禁止<a>标签
    ]
};

强制Inline编辑器粘贴时使用GHS过滤
在Inline编辑器的初始化配置中，指定pasteFilter为generalHtmlSupport，确保粘贴流程完全走GHS的过滤逻辑：

InlineEditor.create(document.querySelector('#inline-editor'), {
    plugins: [GeneralHtmlSupport, /* 其他你需要的插件 */],
    htmlSupport: htmlSupport,
    pasteFilter: 'generalHtmlSupport'
})
.then(editor => {
    // 编辑器初始化完成后的逻辑
})
.catch(error => {
    console.error(error);
});