.appendchild executing twice in CKeditor

Question

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

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

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

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);
            }
    });
});

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?

EDIT: 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.

I've tested your code and it works fine for me. I think that maybe you're loading the /app/assets/javascripts/ckeditor/config.js twice and that's why that code is executed two times. Can you test that? — AlfonsoML
Hi Alfonso! great plugin. worth the 10 euros. I've checked my source and config.js is included only once. Is there a way I can test if it's loaded twice? — Ryan.lay
You shouldn't include yourself the config.js file, as that it's automatically done by the CKEditor. You can test by setting a breakpoint at the 'var element = ev.data.element;' line. If you can't avoid getting the file loaded twice, then you can stop the finishedUpload event by adding a 'ev.stop();' after the appendChild call — AlfonsoML
@AlfonsoML you're right! It was being called twice. ev.stop(); solved the issue. I'm using the galetahub gem for rails so still trying to find out why. If you add the answer I'll accept it. — Ryan.lay

AlfonsoML AlfonsoML · Accepted Answer · 2014-05-25T16:04:04

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 executing twice in CKeditor

1 Answers