.appendchild在CKeditor中执行两次 [英] .appendchild executing twice in CKeditor

问题描述

我正在使用CKeditor的simpleuploads插件。

I'm using the simpleuploads plugin for CKeditor. Everything's working perfect except for one itsy bitsy problem.

我正在尝试将上载的图像对象包装在div中，像这样

I'm trying wrap an uploaded image object in a div like so

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

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

and have added the following at the bottom of /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中，例如：

The problem is div is wrapped in another div like so:

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

如何让脚本仅执行一次？

How do I get the script to execute only once?

编辑：
该问题是由于我的自定义资产/javascripts/ckeditor/config.js被加载，然后再次加载galetahub gem的资产/ckeditor/config.js引起的。不知道问题出在哪里。如果找到解决方案，将发布更多详细信息。

Issue caused by my custom assets/javascripts/ckeditor/config.js being loaded, and then the galetahub gem's assets/ckeditor/config.js being loaded again. Not sure where the problem lies. Will post more details if solution is found.

推荐答案

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

The code is fine, but that file is being included twice so the listener is executed twice. The problem can be avoided by stopping the finishedUpload event after is being executed the first time:

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中执行两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！