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>

如何让脚本只执行一次？

编辑：由我的自定义资产/ javascripts / ckeditor / config.js加载引起的问题，然后再次加载galetahub gem的assets / 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
            }
    });
});

.appendchild在CKeditor中执行两次

1 个答案: