summernote image upload and alternative not workin

问题:

I am using summernote editor on my site and have implemented it using the Click2edit method mentioned on their site here.

However the image upload if used as it is causes all sorts of problems. My understanding is this is using something called base64. I tried to replace this with a more straight forward file upload to the server using code from another stackoverflow answer [here]. (Summernote image upload) However it doesn't seem to be doing anything, the image still gets inserted the original method. If you could help me work out how to correctly implement this.

in terms of the error, my site has several tabs, one of those tabs includes the click2edit summernote editor, when I tried and use the image upload and save it, the picture doesn't display and it combines the tabs as 1 page (likely some special character somewhere causes a problem?). Secondly the sql column which is a text datatype shows no content when viewed in sql management studio and the content is editable, gives some kind of saving error. I ended up needing to delete the entry all together to return things to normal.

my code:

to implement 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();
};

for the file upload 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 the output is being uploaded to sql usinga Post which includes

(stuff)....sql_safe($Postarray[text])....(stuff)

I thought it might be to do with the fact I am using click2edit method of initiating summernote rather then giving it a straight forward #summernote id. But I tried that also and the result was the same. I also do not understand how to disable summernotes own method of uploading, maybe that is overriding. thanks

回答1:

Summer note new version passes 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) {
        }
    });
}

回答2:

I've made small changes on the editor,

The original summernote converts uploaded images to base64 format. This editor uploads images via Php to the file system, Just make sure that you have write access to img-uploads folder.

https://github.com/pherdee/summernote-img-upload

回答3:

I realized the silly mistake I was making, the

onImageUpload: function(files, editor, welEditable) {
        sendFile(files[0], editor, welEditable);
    }

needed to be included with the summernote initialization function like so:

var editit = function() {
  $("#defaulttab").addClass("active");    
  $('.click2edit').summernote({
    focus: true,
    onImageUpload: function(files, editor, welEditable) {
        sendFile(files[0], editor, welEditable);
    }