upload a image and insert directly into CKEditor

Question

I'd like to create the same kind of function tumblr has for uploading images and then inserting them directly into the WYSIWYG editor.

I was planning on using uploadify to upload the image, then I am not sure of the method for inserting into the CKEditor.

Has anyone done anything similar or know of a plugin that could do this? Ideally I'd like it to insert the image wherever the text cursor was last placed.

Upload an image and directly insert it into a text area http://www.freeimagehosting.net/uploads/06217dcebb.png

Thanks in advance,

Tim

Answer 1

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image">');

Answer 2

Correct is:

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image"/>');

Answer 3

I'm using dropzone as the image uploader. I've added a button below each image such that when it's clicked an image is inserted at the cursor position in CKEditor. Please see the example below:

myDropzone.on("addedfile", function(file) {
    // Hookup image insert button
    file.previewElement.querySelector('.insert').onclick = function() {
        var element = CKEDITOR.dom.element.createFromHtml('<img src="' + $SCRIPT_ROOT + '/api/files/' + file.id + '?filter=image"/>');
        CKEDITOR.instances.body.insertElement(element);
    };
}); 

Answer 4

I'm using nice plugin for CKeditor http://www.ckuploader.com