问题
Summernote wysiwyg editor encodes image files into Base64. Well, this seems handy but I expect the DB to be used quite heavily for a long term. This will cause some issues - searching slow, implementing image library, and etc...
I wonder if it has a option to turn this encoding option off and use 'inserting url' method intead. I've been looking for it but no great success yet.
For example, instead of storing images like...
<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>
it should be...
<img src="/images/blah/blah.jpg.">
Any documentation? or any examples to refer?
Thanks !
回答1:
You need to write custom function for onImageUpload().
I was looking for a solution. Found this: Summernote image upload
回答2:
I had this problem with some of my applications as well. I created a detailed tutorial here https://a1websitepro.com/store-image-uploads-on-server-with-summernote-not-base-64/
You have to let summernote know that you are going to process the image file with a function.
$(document).ready(function() {
$("#summernote").summernote({
placeholder: 'enter directions here...',
height: 300,
callbacks: {
onImageUpload : function(files, editor, welEditable) {
for(var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
}
}
});
});
Then create another function like this for the callback.
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
data: form_data,
type: "POST",
url: 'editor-upload.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
$(el).summernote('editor.insertImage', url);
}
});
}
Then you will need to create a php file. To handle the request. Notice the php file for this script is named editor-upload.php
来源:https://stackoverflow.com/questions/27600724/summernote-image-url-instead-of-base64