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

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

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

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

http://www.freeimagehosting.net/uploads/06217dcebb.png

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

Тим


javascript jquery ckeditor wysiwyg
person Timmeh    schedule 16.04.2010    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Правильно:

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

arrow_upward
0
arrow_downward

Я использую 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);
    };
});
person spitz    schedule 17.07.2016

arrow_upward
-1
arrow_downward

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

person Damiano    schedule 17.05.2011
comment
Я просмотрел FAQ по подключаемому модулю Uploader для CKEditor ссылку, и там говорится, что Uploader требует HTTP-сервер с поддержкой для PHP5 (язык программирования). Это могло быть ограничивающим фактором. - person Purplejacket; 16.08.2011
comment
Это также требует mootools. Я изучаю github.com/blueimp/jQuery-File-Upload - person Purplejacket; 16.08.2011

arrow_upward

arrow_downward

person    schedule
comment
Я использую последнюю версию CKeditor и получаю: CKEDITOR.instances.myinstanceName.insertHTML не является функцией - person Jorre; 17.06.2010
comment
моя вина, новая функция - insertHtml (смотрите шапки!). Это вставляет тег html как текст, возможно ли также отобразить изображение в CKEditor? - person Jorre; 17.06.2010
comment
исправлено и это ... вы должны использовать настоящие теги html, а не символы и. Спасибо за вашу помощь! - person Jorre; 17.06.2010