CKEditor中使用数据处理器修改图片HTML时的元素遍历问题

这个问题我之前踩过坑，根源其实就在你用到的**增强图片插件（image2）**上！为了实现图片对齐、拖拽调整这类功能，这个插件会自动把原生<img>标签包裹在容器元素里（比如你看到的<span>，有些配置下也会是<figure>），这就是为啥你遍历element.children时，只能拿到包着img的容器，而非img本身。

怎么搞定这个问题？ #

你需要递归遍历所有层级的子元素，才能挖到被包裹的<img>标签。这里给你一个通用的实现方案：

htmlFilter.addRules({
    elements: {
        $: function(element) {
            // 定义递归查找图片的函数
            function traverseNodes(node) {
                // 先检查当前节点是不是img
                if (node.name === 'img') {
                    console.log('找到目标图片:', node);
                    // 在这里可以对img标签做任意修改，比如调整属性、添加自定义class
                    // 示例：给图片新增一个自定义类
                    // node.attributes.class += ' my-custom-img';
                    return;
                }
                // 如果当前节点有子元素，递归遍历每一个子节点
                if (node.children && node.children.length > 0) {
                    node.children.forEach(childNode => traverseNodes(childNode));
                }
            }

            // 从当前元素开始递归查找
            traverseNodes(element);
            // 必须返回修改后的元素，否则你的变更不会生效
            return element;
        }
    }
});

额外补充说明 #

1. 为啥直接遍历不行？
   你之前的代码只遍历了当前元素的直接子元素，比如第二个<p>的直接子元素是那个包裹img的<span>，而<img>是<span>的子元素，必须深入下一层级才能找到它。

2. 针对增强图片插件的快捷处理
   如果你确定就是增强图片插件的容器在搞鬼，也可以直接定位容器元素再取img：

   htmlFilter.addRules({
       elements: {
           span: function(element) {
               // 检查这个span是不是增强图片的容器（通过class判断）
               if (element.attributes.class && element.attributes.class.includes('align-left')) {
                   // 从子元素里筛选出img
                   const img = element.children.find(child => child.name === 'img');
                   if (img) {
                       console.log('找到图片:', img);
                       // 对img做处理...
                   }
               }
               return element;
           }
       }
   });
   

   不过这种方式不如递归通用，万一插件更新改变了容器类型（比如换成figure），代码就失效了。

最后别忘了，修改完元素后一定要return element，否则CKEditor的数据处理器不会应用你的修改哦！

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