CKEditor v4设置allowedContent后颜色按钮消失的解决咨询

一、保留颜色按钮的配置修改 #

颜色按钮消失的核心原因是：你只在allowedContent里列出了HTML元素，却没允许颜色功能依赖的样式属性。CKEditor的颜色按钮会生成带color或background-color样式的<span>标签，当内容过滤器不允许这些样式时，会判定该按钮功能无法生效，自动隐藏按钮。

你只需要在原有的allowedContent字符串末尾添加 span{color,background-color}，就能让颜色按钮正常显示：

CKEDITOR.replace("editor2", {
  allowedContent: "a abbr acronym address applet area article aside audio b base bdi bdo bgsound big blink blockquote body br button canvas caption center cite code col colgroup content data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h2 h3 h4 h5 h6 head header hr html i iframe image img input ins kbd keygen label legend li link main map mark marquee math menu menuitem meta meter nav nobr noembed noframes noscript object ol optgroup option output p param picture plaintext portal pre progress q rb rp rt rtc ruby s samp script section select shadow slot small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp span{color,background-color}",
});

二、通用找配置值的方法 #

1. 查看默认允许规则：不设置allowedContent，打开浏览器控制台，执行CKEDITOR.instances.你的编辑器ID.filter.allowedContent，就能看到编辑器默认的允许规则，基于这个规则删减不需要的元素/属性更稳妥。
2. 查插件文档：每个插件的官方文档都会说明它依赖哪些HTML元素、属性或样式，比如colorbutton插件就明确需要允许<span>标签的颜色相关样式。
3. 开启调试模式：给编辑器加上config.debug = true;配置，控制台会输出过滤器的详细日志，能看到哪些内容被拦截，针对性添加规则。
4. 逐步删减：先保留默认配置，再逐个移除不需要的元素，避免一次性写全所有元素导致遗漏必要规则。

效果截图 #

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