CKEditor文本域传递带样式HTML丢失样式问题求助

嘿，我之前也踩过这个坑！CKEditor默认的**内容过滤机制（ACF，Advanced Content Filter）**会自动清理掉它不在允许列表里的内联样式和标签，这就是你插入带style属性的HTML后样式消失的原因。下面给你几种靠谱的解决方法：

方法1：初始化编辑器时配置允许的内容 #

在创建CKEditor实例的时候，直接通过allowedContent指定允许的标签和样式。比如你要保留div的color样式，可以这么写：

CKEDITOR.replace('summary-ckeditor', {
    // 允许div标签，以及它的color内联样式
    allowedContent: 'div{color;}'
});

如果你需要更宽松的规则（比如允许所有标签和样式，注意：生产环境不推荐，有XSS风险），可以直接设为true：

CKEDITOR.replace('summary-ckeditor', {
    allowedContent: true
});

方法2：动态修改已初始化编辑器的配置 #

如果编辑器已经实例化了，你也可以在运行时调整配置，再重新插入内容：

var editor = CKEDITOR.instances['summary-ckeditor'];
// 配置允许div的color样式
editor.config.allowedContent = 'div{color;}';
// 用setData插入内容（也可以用insertHtml，确保配置生效后操作）
editor.setData("<div style='color: red'>Trying to get this code in red color when passing to CKEditor text area</div>");

方法3：添加额外允许的内容（不覆盖默认规则） #

如果你不想破坏CKEditor默认的过滤规则，只是想额外允许某些样式，可以用extraAllowedContent：

CKEDITOR.replace('summary-ckeditor', {
    // 在默认允许列表基础上，额外允许div的color样式
    extraAllowedContent: 'div{color;}'
});

注意事项 #

• 尽量不要在生产环境使用allowedContent: true，这会关闭所有内容过滤，可能导致XSS攻击风险。
• 从你的代码来看，应该是使用CKEditor 4，上面的方法都适用；如果是CKEditor 5，配置逻辑会有差异，需要调整为对应版本的API。

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