如何配置CKEditor仅允许含特定data属性的<img>标签？

嘿，我明白你的需求了——要让CKEditor放行所有内容，但唯独把不带data-test属性的<img>标签拦下来对吧？先看看你当前配置的问题在哪，再给你一套可行的方案。

你的现有配置为什么不生效？ #

你现在的代码里，allowedContent设置成了允许所有CKEditor默认支持的元素、所有属性、样式和类，这相当于给所有内容开了绿灯。而disallowedContent: 'img'试图完全禁止img标签，但因为allowedContent的优先级更高，这条规则被覆盖了，所以图片还是能正常被接受，这就是问题所在。

正确的配置方案 #

要实现“允许带data-test的img，拒绝不带的”，我们需要利用CKEditor内容过滤（ACF）的条件规则，调整配置如下：

// 先允许所有默认元素、属性、样式和类
config.allowedContent = {
  $1: {
    elements: CKEDITOR.dtd,
    attributes: true,
    styles: true,
    classes: true
  }
};

// 禁止所有不包含data-test属性的img标签
config.disallowedContent = 'img{!data-test}';

配置说明 #

• allowedContent的配置保持了你原本的需求：放行所有内容，包括所有元素、属性、样式和类。
• disallowedContent: 'img{!data-test}'是核心规则：{!data-test}表示“不包含data-test属性”，这条规则会把所有不带data-test的img标签过滤掉，而带有该属性的img则会因为allowedContent的规则被保留下来。

额外注意点 #

• 确保CKEditor的内容过滤（ACF）处于启用状态：默认情况下ACF是开启的，只要你没有设置config.allowedContent = true（这会完全关闭ACF），这个配置就会生效。
• 测试的时候可以尝试粘贴/插入两张图片：一张带有data-test属性，一张不带，验证不带的会被过滤掉，带的能正常保留。

内容的提问来源于stack exchange，提问作者Markus Döbele