• Home
  • Заметки
  • Загрузка картинок на сервер в WYSIWYG Summernote

Загрузка картинок на сервер в WYSIWYG Summernote

По умолчанию картинки в редактор загружаются в виде data:URL. Это не всегда удобно. Если сохранять картинки в БД, то таблицы раздуются. Да и не надо их там хранить.
Задача: загрузить их на сервер и отобразить в редакторе с помощью стандартной кнопки.

Сам редактор тут.
Подключаем редактор:

<script src="../summernote-0.8.9/summernote-lite.js"></script>
<script src="../summernote-0.8.9/lang/summernote-ru-RU.js"></script>
<link href="../summernote/0.8.9/summernote.css" rel="stylesheet">

Прикрепляем его к нужному элементу:

<textarea id="summernote" name="name"></textarea>
$(function(){
	$('#summernote').summernote({
		lang: 'ru-RU',
		placeholder: 'Текст новости',
		tabsize: 2,
		minHeight: 200,
		callbacks: {
			onImageUpload: function(files) {
				for(var i=0; i < files.length; i++) {
					sendCMSFile(files[i]);
				}
			}
		}
	});
});
function sendCMSFile(file) {
    if (file.type.includes('image')) {
        var name = file.name.split(".");
        name = name[0];
        var data = new FormData();
        data.append('action', 'imgUpload');
        data.append('file', file);
        $.ajax({
            url: "../ajax.php",
            type: 'POST',
            contentType: false,
            cache: false,
            processData: false,
            dataType: 'JSON',
            data: data,
            success: function (url) {
                $('#summernote').summernote('insertImage', url);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error(textStatus + " " + errorThrown);
            }
        });
    }
}

onImageUpload отвечает за загрузку картинки в редактор, его и переделываем.
В ajax.php:

if ($_POST['action'] == 'imgUpload') {
	$name = rand(0, 999999);
	$ext = explode('.',$_FILES['file']['name']);
	$filename = $name.'.'.$ext[1];
	$destination = $_SERVER['DOCUMENT_ROOT'].'/upload/'.$filename;
	$location = $_FILES["file"]["tmp_name"];
	move_uploaded_file($location, $destination);
	$result = 'http://site/upload/'.$filename;
	return print_r(json_encode($result, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE));
}

Пример простой. Конечно же не забываем про безопасность и обработки ошибок. Ну и название файлов оригинальней надо.

Трекбэк с Вашего сайта.

  • Оставить комментарий