Мультизагрузка в wysiwyg редакторе

Суть вот в чем, есть редактор (для примера: 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 после чего идет обработка на сервере и возврат пути, который успешно вставляется в редактор при окончании загрузки каждого изображения.