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

+3


source to share


3 answers


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) {
        }
    });
}

      

+12


source


I made small changes in the editor,

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



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

+1


source


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);
    }

      

0


source







All Articles