[Из песочницы] Мультизагрузка в 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('
');
}
});
Итак, что мы хотим, мы указали класс для дроп зоны (dropzone: 'dragbox') и разумеется обозначили это место в нашем html коде.
Загрузка изображений + (перетащите изображения сюда)
Сюда мы и будем кидать фотографии перетаскиванием. После этого написали в функции обратного вызова, о том, что когда загрузка завершится мы хотим вставить изображение в конец редактора.
onComplete: function(filename, response) {
$('.redactor-editor').append('
');
}
На сервере берем их готовую библиотеку и подключаем (пример из документации).
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('
');
}
По итогу, мы перетаскиваем изображения в поле 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('
');
}
});
