Суть вот в чем, есть редактор (для примера: imperavi.com/redactor) и есть необходимость загружать сразу много картинок за один раз. В идеале простым перетаскиванием, а в нашем случае редактор кушает только одну картинку за раз. Это нужно поправить.
Покопавшись в api редактора и не найдя ничего про мультизагрузку, я начал думать, как решить эту проблему, не прибегая к каким-то глобальным разработкам вроде написания плагина с нуля. Это займет много времени и усилий, к тому же время поджимало и сделать нужно до вечера.
Тогда делаем иначе, вспоминаем про уже готовый плагин github.com/LPology/Simple-Ajax-Uploader для мультизагрузки с той мыслью, что мы отдаем картинки мультизагрузчику и после пишем их в редактор. Сказано — сделано.
Подключаем все необходимые файлы и инициализируем редактор.
$('.text').redactor();
Также инициализируем загрузчик Simple Ajax Uploader.
new ss.SimpleUpload({ dropzone: 'dragbox', url: 'upload/path', name: 'file', multiple: true, responseType: 'json', onComplete: function(filename, response) { $('.redactor-editor').append('<p><img src="'+ filename +'" /></p>'); } });
Итак, что мы хотим, мы указали класс для дроп зоны (dropzone: ‘dragbox’) и разумеется обозначили это место в нашем html коде.
<div class="dragbox"> Загрузка изображений + (перетащите изображения сюда) </div>
Сюда мы и будем кидать фотографии перетаскиванием. После этого написали в функции обратного вызова, о том, что когда загрузка завершится мы хотим вставить изображение в конец редактора.
onComplete: function(filename, response) { $('.redactor-editor').append('<p><img src="'+ filename +'" /></p>'); }
На сервере берем их готовую библиотеку и подключаем (пример из документации).
require('Uploader.php'); $upload_dir = '/img_uploads/'; $valid_extensions = array('gif', 'png', 'jpeg', 'jpg'); $Upload = new FileUpload('file'); $result = $Upload->handleUpload($upload_dir, $valid_extensions); if (!$result) { echo json_encode(array('success' => false, 'msg' => $Upload->getErrorMsg())); } else { echo json_encode(array('success' => true, 'file' => $Upload->getFileName())); }
Изображения исправно загружаются на сервер и пути возвращаются назад, но возникла проблема с редактором, он не принимает наш html код, постоянно его подчищая. К тому же, таким образом мы не можем контролировать место загрузки изображений.
Снова возвращаемся к api редактора и ищем как можно напрямую влиять на его содержимое через api. Оказывается можем, т.к. находим нужный нам метод imperavi.com/redactor/docs/api/insert. Переписываем код обратного вызова для вставки картинок.
В первую очередь, нам нужно вынести внутреннюю ссылку на редактор для того, чтобы иметь доступ к его api. Для этого объявляем переменную в поле видимости их обоих.
var redactor;
После чего в эту переменную помещаем внутреннюю ссылку на редактор, используя обратный вызов, исполняемый при инициализации редактора.
$('.text').redactor({ initCallback: function(){ redactor = this; } });
В конечном счете используя доступный теперь нам метод insert вставляем изображения в редактор.
onComplete: function(filename, response) { redactor.insert.html('<p><img src="'+response.path+'" /></p>'); }
По итогу, мы перетаскиваем изображения в поле dragbox после чего идет обработка на сервере и возврат пути, который успешно вставляется в редактор при окончании загрузки каждого изображения.
var redactor; $('.text').redactor({ initCallback: function(){ redactor = this; } }); new ss.SimpleUpload({ dropzone: 'dragbox', url: 'upload/path', name: 'file', multiple: true, responseType: 'json', onComplete: function(filename, response) { redactor.insert.html('<p><img src="'+response.path+'" /></p>'); } });
ссылка на оригинал статьи http://habrahabr.ru/post/262195/
Добавить комментарий