Modifying the generated element in SimpleUploads.

I think that I've already written about this type of requests, but as I've not been able to quickly find it, it deserved a simple post.

Request: after uploading an image with SimpleUploads, wrap it in a link element for use with any type of effect like ColorBox. eg:

<a href="filepath" class="colorbox" target="_blank"><img src="filepath"/></a>

This is achieved using the 'simpleuploads.finishedUpload' event, add in your page this code (adjust it according to your needs:

CKEDITOR.on('instanceReady', function(e) {

    // the real listener
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
        var editor = ev.editor;
        // CKEditor.dom.element
        var element = ev.data.element;
        //console.log(element)

        var a = document.createElement('a');
        a.href = element.getAttribute('src');
        a.className = 'colorbox';
        a.target = '_blank';

        // create a CKEditor.dom.element
        var ckLink = new CKEDITOR.dom.element(a);
        // replace the image with the link
        ckLink.replace(element);
        // insert the link into the image
        element.appendTo(ckLink);
    });
});