如何配置CKEditor 5使其支持<br>标签与内联样式？

我之前也踩过CKEditor5内容过滤的坑，它默认的ACF（自动内容过滤）机制确实会严格过滤未被允许的元素和样式，官方文档里关于HtmlSupport插件和ACF配置的部分其实有对应的解决方案，可能你搜索时关键词没精准匹配到。下面是具体的解决步骤：

1. 允许<br>标签 #

要保留<br>标签，你需要在编辑器配置中通过htmlSupport插件显式允许该元素：

ClassicEditor
    .create(document.querySelector('#editor'), {
        htmlSupport: {
            allow: [
                {
                    name: 'br' // 显式允许<br>标签
                }
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

如果你的编辑器是自定义构建版本，需要确保已经包含HtmlSupport插件（大部分官方预设编辑器如ClassicEditor默认已包含）。

2. 保留内联样式（如margin:0px） #

对于内联样式，同样通过htmlSupport配置指定允许的元素和对应样式属性：

ClassicEditor
    .create(document.querySelector('#editor'), {
        htmlSupport: {
            allow: [
                // 允许<br>标签
                { name: 'br' },
                // 允许p标签的margin内联样式
                {
                    name: 'p',
                    styles: 'margin'
                },
                // 如果需要允许多个样式，可使用数组
                {
                    name: 'div',
                    styles: ['margin', 'padding']
                }
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

如果想要更宽松的配置（不推荐，存在安全风险），可以通过config.allowedContent关闭特定过滤，但更推荐使用htmlSupport的精准规则来控制。

补充说明 #

CKEditor5的内容过滤是为了保证输出内容的一致性和安全性，所以默认不会允许所有元素和样式。如果需要更复杂的自定义规则，还可以在htmlSupport.allow中使用正则匹配属性值，比如限制margin的取值范围，但一般场景下上面的基础配置就足够解决你的问题了。

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