загрузить изображение и вставить прямо в CKEditor

Question

Я бы хотел создать такую ​​же функцию, как и в tumblr для загрузки изображений и их последующей вставки непосредственно в редактор WYSIWYG.

Я планировал использовать uploadify для загрузки изображения, тогда я не уверен в способе вставки в CKEditor.

Кто-нибудь сделал что-нибудь подобное или знает плагин, который мог бы сделать это? В идеале я хотел бы, чтобы он вставлял изображение туда, где последний раз находился текстовый курсор.

Загрузить изображение и напрямую вставить его в текстовую область http://www.freeimagehosting.net/uploads/06217dcebb.png

Заранее спасибо,

Тим

Answer 1

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

Answer 2

Правильно:

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

Answer 3

Я использую Dropzone в качестве загрузчика изображений. Я добавил кнопку под каждым изображением, чтобы при ее нажатии изображение вставлялось в позицию курсора в CKEditor. Пожалуйста, смотрите пример ниже:

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

Я использую хороший плагин для CKeditor http://www.ckuploader.com