JavaScript — как получить изображение, вставленное пользователем с помощью summernote, и загрузить его на диск в Stack Overflow

Question

JavaScript — как получить изображение, вставленное пользователем с помощью summernote, и загрузить его на диск в Stack Overflow

Я использую summernote в bootstrap в качестве редактора. Это выглядит хорошо, и я люблю его использовать. Я могу получить тексты, вставленные пользователем, однако проблема заключается в том, что когда пользователь вставляет изображение, источник изображения возвращается к двоичному тексту. Я не хочу сохранять весь этот текст в базе данных, вместо этого я хочу, чтобы изображение было сохранено непосредственно на моем диске и скопировать имя образа и сохранить его в базе данных.

Кто-нибудь знает это?

Спасибо

-6

javascript json php summernote

Решение

Другие решения

Использование кнопки изображения Summernote

Это небольшой фрагмент, который я использую для своих cms.

Интеграция функции загрузки изображений в SummerNote

$(document).ready(function() {
$('.editor').summernote({
height: 300,
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
['genixcms', ['elfinder']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});

function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
url: "saveimage.php",
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
$('.editor').summernote('editor.insertImage', data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus+" "+errorThrown);
}
});
}

$(".alert").alert();
});

Этот фрагмент заставит диалог загрузки изображения отправить файл на диск. Но чтобы справиться с этим, вы должны создать php-файл, который будет обрабатывать загрузку изображений.
Посмотрите этот маленький код для моей CMS

Saveimage PHP файл

$url = "http://yoursite.com";
$allowed = array('png');

if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){
$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['file']['tmp_name'], GX_PATH.'/assets/images/uploads/'.$_FILES['file']['name'])){
$tmp= '/assets/images/uploads/'.$_FILES['file']['name'];
echo $url.'/assets/images/uploads/'.$_FILES['file']['name'];
//echo '{"status":"success"}';
exit;
}
}

Этот php файл сохранит файл в путь. для вставки в вашу базу данных, я думаю, вы уже знаете.

Я надеюсь, что это поможет вам или кому-то еще была такая же проблема.

Использование файлового менеджера elFinder

для использования файлового менеджера elFinder. пожалуйста, посмотрите этот ответ.
Как добавить менеджер изображений в редакторе Summernote WYSIWYG?

Благодарю вас,

0

Источник

Accepted Answer

var weblayout = {
data : {
rows : function() {
return 1;
}
}
};

weblayout.data.rows();// call the function row()

DEMO

или же

var weblayout = {
data : {
rows : function() {
return 1;
}
}
};

var fctRow = weblayout.data.rows();// call the function row()
alert(fctRow);

DEMO

1