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