Summer loading image upload and alternative job
I am using summernote editor on my site and have implemented it using the Click2edit method mentioned on their site here .
However, uploading an image, if used as such, causes all sorts of problems. I understand that this is what is called base64. I tried to replace this with a more direct file upload to the server using code from another stackoverflow answer [here]. ( Summernote upload image ) However it doesn't seem to do anything, the image is still pasted into the original method. If you could help me decide how to properly implement this.
in terms of error, my site has multiple tabs, one of these tabs include the clickernate click2edit editor, when I tried and used to load the image and save it, the image is not displayed and it merges the tabs as 1 page (probably some special character causing the problem somewhere?). Second, the sql column which is a text data type does not display the content when viewed in sql management studio and the content is being edited gives some save error. I ended up having to delete the entry together to get something back to normal.
my code:
to execute summernote:
<div class="click2edit">click2edit</div>
var edit = function() {
$('.click2edit').summernote({focus: true});
};
var save = function() {
var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
};
to download the file I am using:
$(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: "form_summernote_doc_upload_post.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
I should also mention that the output is loaded into sql using Post, which includes
(stuff)....sql_safe($Postarray[text])....(stuff)
I thought it might be because I am using the click2edit method to launch summernote and then giving it a direct #summernote id. But I tried this too and the result was the same. I also don't understand how to disable summernotes' native load method, maybe this is an override. thank
source to share
Summer note in the new version contains only one argument. So you can use this script
$('.summer').summernote({
height: "200px",
callbacks: {
onImageUpload: function(files) {
url = $(this).data('upload'); //path is defined as data attribute for textarea
sendFile(files[0], url, $(this));
}
}
});
function sendFile(file, url, editor) {
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function(objFile) {
editor.summernote('insertImage', objFile.folder+objFile.file);
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
source to share
I figured out the stupid mistake I was making
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
it was necessary to include in the summernote initialization function like this:
var editit = function() {
$("#defaulttab").addClass("active");
$('.click2edit').summernote({
focus: true,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
source to share