Hello,
If you need to configure Summernote editor to upload images to your server and return the URL, you can follow steps below, I am using Asp.net core as backend:
Basic Initialization:
$('#Description').summernote({
height: 400,
callbacks: {
onImageUpload: function (files, editor, welEditable) {
sendFile(files[0], editor, welEditable, "Description");
}
} });
Add the SendFile function :
function sendFile(file, editor, welEditable, editorId) {
let url = "/Main/Misc/UploadeSummernoteFile";
formData = new FormData();
formData.append("SummernoteFile", file);
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (FileUrl) {
var imgNode = document.createElement("img");
imgNode.src = FileUrl.url;
$("#" + editorId).summernote("insertNode", imgNode);
},
error: function (data) {
alert(data.responseText);
}
});
}
This function will call API to save the file and return Image URL back, onImageUpload function is responsible to add the image in editor.