使用CKEditor中的数据处理器更改图像

Question

我正在尝试更改CKEditor中图像的HTML输出，但是我无法迭代从数据处理器函数返回的元素。

编辑器中的HTML：

<p>Test</p>

<p><img alt="" class="align-left" height="170" src="http://example.local/assets/img/uploads/photo.jpg" width="161" />&nbsp;some text</p>

数据处理器：

htmlFilter.addRules( {
    elements : {
        $ : function( element ) {
            console.log(element.children);
            element.children.forEach(function(ele) {
                console.log(ele);
            });
        }
    }
});

我想简单地使用类似element.name == 'img'的内容查找图片代码，但只解析p - 代码。当我记录element.children时，我在第二段中看到了img：

但是，当我使用element.children迭代element.children.forEach(function(ele) { console.log(ele); })时，我得到的不是img标记，而span包含img：

有谁知道发生了什么？如何访问图片代码？

我正在使用增强型图像插件顺便说一下，虽然我不认为这很重要。

Answer 1

请使用img代替$。无论何时切换到源模式或从编辑器获取数据，您都可以获得图像。

var editor = CKEDITOR.replace( 'editor1', {
    on: {
        pluginsLoaded: function( evt ) {
            evt.editor.dataProcessor.htmlFilter.addRules( {
                elements: {
                    img: function( el ) {
                        console.log( el );
                    }
                }
            } );
        }
    }
});