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