Summernote the simple method of realizing picture upload function _javascript skill

Or is it the last time you wrote a bootstrap Web page .... And then you're going to use the Rich Text editor, and you can pick it up with a random search.

Then I found the awkward question ... Image upload function is invalid .... Then all kinds of search all kinds of fruitless ... Finally anger turned Summernote official document finally solved, in short write down the resolution process

The backend section does not provide the code, the full street is, here assume the backend to get the file to return the address of the file

First Attach reference: Summernote Official development document

The simple next Summernote picture upload function Realization Plan

First, according to the official documents provided by the API, hook up file upload events, and then upload their own files with JS, and finally use the API to insert the picture into the edit box can be

Originally is quite simple question, unfortunately the official also did not know why actually changed the interface writing ... And all the information that was found on the internet was lost. Although there are reasons why I didn't search deeply enough.

In short, finishing the core of the two Summernoteapi, take over the file upload event and insert the picture, according to the official document description format as follows

Take over picture upload event
$ (' #summernote '). Summernote ({
  callbacks: {
   onimageupload:function (files) {
    // Upload picture to server and insert picture to edit box}}
;

Insert Picture
$ (' #summernote '). Summernote (' insertimage ', url, filename);
For more detailed explanation see the official Website API documentation provided above

Then you can easily implement the Summernote edit box that supports uploading pictures.

The code is as follows:

$ (' #summernote '). Summernote ({
  callbacks: {
    onimageupload:function (files) {
      //uploading pictures to the server, using the Formdata object, As for compatibility ... It is said that the low version IE is not very friendly to
      var formData = new FormData ();
      Formdata.append (' file ', files[0]);
      $.ajax ({
        URL: ' Upload ',//Background File Upload interface
        type: ' POST ',
        data:formdata,
        processdata:false,
        Contenttype:false,
        success:function (data) {
          $ (' #summernote '). Summernote (' insertimage ', Data, ' img ');
        }
      });
    }
  }
});

Finally, this only implements one of the simplest, the compatibility is not how to completely do not consider the error exception hint picture upload function just .... Please make your own changes according to your needs

The above summernote implementation picture upload function Simple method is small series share to everybody's content, hope can give everybody a reference, also hope everybody support cloud habitat community.