Загрузка изображения Summernote
У меня проблема с редактором Summernote. Я хочу загрузить изображения в каталог на сервере. У меня есть сценарий:
<script type="text/javascript">
$(function () {
$(\'.summernote\').summernote({
height: 200
});
$(\'.summernote\').summernote({
height:300,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
});
</script>
<script type="text/javascript">
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
url = "http://localhost/spichlerz/uploads";
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function (url) {
editor.insertImage(welEditable, url);
}
});
}
</script>
<td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td>
Конечно, у меня есть все файлы js и css. Что я делаю не так? Если я нажму на загрузку изображения и зайду в редактор, изображение не будет в текстовой области.
Если я удаляю функцию sendFile и onImageUpload: изображение сохраняют на base64.
Ссылка на summernote: http://hackerwins.github.io/summernote/
6 ответов
Я проверил этот код и работает
Javascript
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 200,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "Your URL POST (php)",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
</script>
PHP
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = '/assets/images/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo 'http://test.yourdomain.al/images/' . $filename;//change this URL
}
else
{
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
Загрузка изображения для Summernote v0.8.1
для больших изображений
$('#summernote').summernote({
height: ($(window).height() - 300),
callbacks: {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
function uploadImage(image) {
var data = new FormData();
data.append("image", image);
$.ajax({
url: 'Your url to deal with your image',
cache: false,
contentType: false,
processData: false,
data: data,
type: "post",
success: function(url) {
var image = $('<img>').attr('src', 'http://' + url);
$('#summernote').summernote("insertNode", image[0]);
},
error: function(data) {
console.log(data);
}
});
}
ЗАГРУЗИТЬ ИЗОБРАЖЕНИЯ С PROGRESS BAR
Думаю, я бы расширил ответ пользователя user3451783 и предоставил бы ему индикатор прогресса HTML5. Я обнаружил, что загружать фотографии было очень неприятно, даже не зная, происходит ли что-либо вообще.
HTML
<progress></progress>
<div id="summernote"></div>
JS
// initialise editor
$('#summernote').summernote({
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
// send the file
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
return myXhr;
},
url: root + '/assets/scripts/php/app/uploadEditorImages.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
// update progress bar
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded, max:e.total});
// reset progress on complete
if (e.loaded == e.total) {
$('progress').attr('value','0.0');
}
}
}
Этот код хорошо работал с новой версией (v0.8.12) (2019-05-21)
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
for(let i=0; i < files.length; i++) {
$.upload(files[i]);
}
}
},
height: 500,
});
$.upload = function (file) {
let out = new FormData();
out.append('file', file, file.name);
$.ajax({
method: 'POST',
url: 'upload.php',
contentType: false,
cache: false,
processData: false,
data: out,
success: function (img) {
$('#summernote').summernote('insertImage', img);
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(textStatus + " " + errorThrown);
}
});
};
PHP-код (upload.php)
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = 'images/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo 'images/' . $filename;//change this URL
}
else
{
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
Summernote по умолчанию преобразует ваши загруженные изображения в какую-то бессмысленную строку, вы можете обработать эту строку или, как упоминали другие, вы можете загружать изображения, используя onImageUpload Перезвони. Вы можете взглянуть на эту суть, которую я немного изменил, чтобы адаптировать laravel csrf token здесь Но это не сработало для меня, и у меня не было времени, чтобы выяснить, почему! Вместо этого я решил это с помощью серверного решения на основе этого поста в блоге. Он получает выходные данные summernote, а затем загружает изображения и обновляет окончательный HTML-код уценки.
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
Route::get('/your-route-to-editor', function () {
return view('your-view');
});
Route::post('/your-route-to-processor', function (Request $request) {
$this->validate($request, [
'editordata' => 'required',
]);
$data = $request->input('editordata');
//loading the html data from the summernote editor and select the img tags from it
$dom = new \DomDocument();
$dom->loadHtml($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach($images as $k => $img){
//for now src attribute contains image encrypted data in a nonsence string
$data = $img->getAttribute('src');
//getting the original file name that is in data-filename attribute of img
$file_name = $img->getAttribute('data-filename');
//extracting the original file name and extension
$arr = explode('.', $file_name);
$upload_base_directory = 'public/';
$original_file_name='time()'.$k;
$original_file_extension='png';
if (sizeof($arr) == 2) {
$original_file_name = $arr[0];
$original_file_extension = $arr[1];
}
else
{
//the file name contains extra . in itself
$original_file_name = implode("_",array_slice($arr,0,sizeof($arr)-1));
$original_file_extension = $arr[sizeof($arr)-1];
}
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$path = $upload_base_directory.$original_file_name.'.'.$original_file_extension;
//uploading the image to an actual file on the server and get the url to it to update the src attribute of images
Storage::put($path, $data);
$img->removeAttribute('src');
//you can remove the data-filename attribute here too if you want.
$img->setAttribute('src', Storage::url($path));
// data base stuff here :
//saving the attachments path in an array
}
//updating the summernote WYSIWYG markdown output.
$data = $dom->saveHTML();
// data base stuff here :
// save the post along with it attachments array
return view('your-preview-page')->with(['data'=>$data]);
});
Я пробовал почти все ответы здесь, и ни один из них не работал у меня в версии 0.8.18.
Нашел простое решение, может кому пригодится.
Вот:
Откройте свой js
summernote/summernote-lite.jsи найти
onImageUpload: null,.
Заменить :
onImageUpload: function(files) {
var $editor = $(this);
var data = new FormData();
data.append('file', files[0]);
$.ajax({
url: 'editor-upload.php',
method: 'POST',
data: data,
processData: false,
contentType: false,
success: function(response) {
$editor.summernote('insertImage', response);
}
});
},
Простой пример php:
editor-upload.php
if(empty($_FILES['file']))
{
echo "Insert image";
}
$errorImgFile = "img/img_upload_error.jpg";
$destinationFilePath = 'img-uploads/'.$_FILES['file']['name'];
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
echo $errorImgFile;
}
else{
echo $destinationFilePath;
}
Очистите данные просмотра и обновите страницу. Вот и все, это работает как шарм.
Примечание . Я не использую уменьшенную версию, поэтому будьте осторожны и сначала сделайте резервную копию файла.