По умолчанию картинки в редактор загружаются в виде 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));
}
Пример простой. Конечно же не забываем про безопасность и обработки ошибок. Ну и название файлов пооригинальней надо.