Upload image and paste directly into CKEditor

Question

I would like to create the same function that tumblr has for loading images, and then pasting them directly into the WYSIWYG editor.

I planned to use uploadify to upload the image, then I am not sure about the method for embedding in CKEditor.

Has anyone done something similar or knew about a plugin that could do this? Ideally, I would like it to insert an image wherever the text cursor was placed.

Download the image and directly paste it into the 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

Correctly:

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

Answer 3

I use dropzone as an image downloader. I added a button under each image so that when I click the image will be inserted at the cursor position in CKEditor. 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 use a good plugin for CKeditor http://www.ckuploader.com