如何阻止CKEditor修改从PHP获取的iframe标签属性顺序？

碰到过同样的问题！CKEditor默认会自动标准化HTML标签的属性顺序（一般是按字母排序），目的是让输出的HTML更规整，但确实会打乱我们原本设定的属性顺序。要解决这个问题，分CKEditor 4和CKEditor 5两种情况来处理：

针对CKEditor 4 #

方法1：直接禁用属性自动排序 #

在CKEditor的配置文件里，修改HTML数据处理器的属性排序开关，把它设为false即可：

CKEDITOR.editorConfig = function( config ) {
    // 关闭属性自动排序功能
    config.dataProcessor.htmlFilter.sortAttributes = false;
};

这样编辑器就会保留你原始的属性顺序，不会再自动调整了。

方法2：保护iframe标签（适合不需要编辑iframe属性的场景） #

如果你不需要在编辑器里修改iframe的任何属性，可以把iframe标签标记为「受保护内容」，让CKEditor完全不解析或修改它：

CKEDITOR.editorConfig = function( config ) {
    // 匹配iframe的开始标签和结束标签，加入受保护列表
    config.protectedSource.push( /<iframe[\s\S]*?>/gi );
    config.protectedSource.push( /<\/iframe>/gi );
};

针对CKEditor 5 #

CKEditor 5的架构更模块化，需要通过配置htmlSupport和格式化规则来控制属性顺序：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 允许iframe的所有属性，避免被过滤
        htmlSupport: {
            allow: [
                {
                    name: 'iframe',
                    attributes: true
                }
            ]
        },
        // 禁用属性自动排序
        formatting: {
            attributes: {
                sort: false
            }
        }
    } )
    .catch( error => {
        console.error( error );
    } );

注意：如果你的CKEditor 5没有htmlSupport相关配置，可能需要先安装@ckeditor/ckeditor5-html-support插件，确保编辑器支持自定义HTML规则。

另外，如果配置后还是有问题，建议检查一下是否有其他过滤类插件（比如内容审核、HTML清理插件）在干扰输出，调整这些插件的配置来兼容你的需求。

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