CKEDITOR4中filter.addTransformations未生效问题求助

问题分析与修复方案 #

你的代码没生效主要有两个核心问题：

1. childRule用法错误：这个回调是用来校验子节点是否符合规则，不是用来替换整个元素的，返回新的fragment不会触发元素替换。
2. 正则匹配过于严格：原正则/^text-align:(justify)$/无法匹配带空格或分号的style值（比如实际场景中可能是text-align: justify;），导致无法命中目标元素。

下面是修复后的代码：

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.on('filter', function(event) {
        var filter = event.data.filter;
        filter.addRules({
            elements: {
                p: function(element) {
                    // 检查style属性是否包含text-align:justify
                    var styleAttr = element.attributes.style;
                    if (styleAttr && /text-align\s*:\s*justify/i.test(styleAttr)) {
                        // 检查子节点是否只有一个 文本节点
                        var children = element.children;
                        if (children.length === 1 && children[0].name === '#text' && children[0].value === '\xa0') {
                            // 移除整个style属性
                            delete element.attributes.style;
                            
                            // 如果需要保留其他样式，仅移除text-align:justify，可替换为下面的代码：
                            // element.attributes.style = styleAttr.replace(/text-align\s*:\s*justify\s*;?/i, '').trim();
                            // 若处理后style为空，直接删除该属性
                            // if (!element.attributes.style) delete element.attributes.style;
                        }
                    }
                }
            }
        });
    });
});

关键修改说明 #

• 改用filter.addRules直接处理元素，这是CKEditor过滤器修改元素属性更直接的方式。
• 调整正则为/text-align\s*:\s*justify/i，兼容空格、大小写和额外分号，确保能匹配到目标样式。
• 直接操作目标元素的attributes，删除style属性（或移除指定样式），而非尝试返回新元素，确保过滤器能正确应用修改。
• 保留了子节点校验逻辑，确保只处理内容为单个 的p标签。

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