CKEditor无法保存button标签及HTML标签丢失的配置咨询

嘿，我之前也踩过CKEditor标签丢失的坑，你遇到的这两个问题本质都是CKEditor默认的内容过滤机制在“自作主张”清理它认为不符合规则的标签，调整下配置就能搞定，给你具体说说：

核心解决思路：配置内容白名单 #

CKEditor默认会过滤不在它内置白名单里的标签和属性，所以咱们得手动把需要保留的标签加进去。

1. 针对CKEditor 4的配置

打开你的config.js文件（或者在初始化编辑器时直接传配置），添加以下规则：

CKEDITOR.editorConfig = function( config ) {
    // 允许button标签及其常用属性（id、class、type、disabled等）
    config.extraAllowedContent = 'button[id,class,type,disabled]';
    
    // 如果还有其他丢失的标签，比如自定义标签或者span/div的特殊属性，也在这里追加
    // 例：允许所有div属性 + 自定义my-tag标签
    // config.extraAllowedContent = 'button[id,class,type,disabled]; div[*]; my-tag';
};

extraAllowedContent是在默认过滤规则基础上额外添加允许的内容，语法很直观：标签名[属性1,属性2]，要允许标签所有属性就写标签名[*]，只允许标签本身就直接写标签名。

如果不想逐个配置（仅限内部系统或测试场景，有XSS风险），可以直接关闭严格过滤：

config.allowedContent = true;

2. 针对CKEditor 5的配置

CKEditor 5的配置逻辑略有不同，需要通过htmlSupport来声明允许的标签：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        htmlSupport: {
            allow: [
                {
                    name: 'button', // 允许button标签
                    attributes: true, // 允许所有属性
                    classes: true, // 允许所有class
                    styles: true // 允许所有样式
                },
                // 追加其他需要保留的标签
                // { name: 'your-custom-tag', attributes: true }
            ]
        }
    })
    .catch( error => {
        console.error( error );
    });

额外检查点 #

• 确认没有其他插件（比如ACF内容过滤插件）覆盖你的配置，最好直接在编辑器初始化时传入配置，比全局config.js更稳妥。
• 如果是从后端保存/读取内容，也要确认后端没有二次过滤HTML标签，有时候问题可能出在后端而非CKEditor本身。

这样调整后，button标签和其他需要的标签应该就能正常留存啦！

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