javascript - .appendchild 在 CKeditor 中执行两次

Question

我正在使用 CKeditor 的 simpleuploads 插件。除了一个小问题之外，一切都运行完美。

我正在尝试将上传的图像对象包装在 div 中，如下所示

<div class="image-container>
   <img class="addedImg>
</div>

并在/app/assets/javascripts/ckeditor/config.js 底部添加了以下内容

CKEDITOR.on('instanceReady', function(e) {
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev)
    {
            var element = ev.data.element;
            if (element.getName() == 'img')
            {
                    var img = element.$,
                    doc = img.ownerDocument,
                    div = doc.createElement('div');
            img.setAttribute('class', 'addedImg');
            img.removeAttribute('width');
            img.removeAttribute('height');
            div.setAttribute('class', 'image-container');
                    img.parentNode.replaceChild(div, img);
            div.appendChild(img);
            }
    });
});

问题是 div 被包裹在另一个 div 中，如下所示:

<div class="image-container">
   <div class="image-container">
       <img class="addedImg">
   </div>
</div>

如何让脚本只执行一次？

编辑:由于加载我的自定义 asset/javascripts/ckeditor/config.js，然后再次加载 galetahub gem 的 asset/ckeditor/config.js 导致的问题。不确定问题出在哪里。如果找到解决方案，将发布更多详细信息。

Answer 1

代码很好，但是该文件被包含两次，因此监听器被执行两次。这个问题可以通过在第一次执行后停止finishedUpload事件来避免:

CKEDITOR.on('instanceReady', function(e) {
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev)
    {
            var element = ev.data.element;
            if (element.getName() == 'img')
            {
                    var img = element.$,
                    doc = img.ownerDocument,
                    div = doc.createElement('div');
            img.setAttribute('class', 'addedImg');
            img.removeAttribute('width');
            img.removeAttribute('height');
            div.setAttribute('class', 'image-container');
                    img.parentNode.replaceChild(div, img);
            div.appendChild(img);

                    ev.stop(); // Stop the event in case the listener is inserted twice
            }
    });
});