Simple way to implement image upload function in Summernote

I'll continue to write a BootStrap webpage as I said before... and then I'll use a rich text editor, just search it and select it

Then I found a very embarrassing problem... The image upload function is invalid... Then various searches are fruitless... Finally, I flicked through the official Summernote document and finally solved it. In short, I wrote down the solution process.

The backend part does not provide code, it is full of people. Here, assuming that the backend gets the uploaded file and returns the address of the file.

First, please attach the reference materials: Summernote official development document

Briefly talk about the implementation plan of Summernote's image upload function

First, according to the API provided by the official document, attach the file upload event, then use JS to re-upload the file, and finally use the API to insert the image into the editing box.

It was a very simple question, but unfortunately the official did not know why the interface was written... and then all the information I searched online was cheated... Although there were reasons why I didn't search in depth enough

In short, the two core Summernote APIs are sorted out, taking over file upload events and inserting pictures, and the format is as follows according to the official documentation.

 //Take over image upload event $('#summernote').summernote({ callbacks: { onImageUpload: function(files) { // Upload the image to the server and insert the image to the edit box} }});//Insert the image $('#summernote').summernote('insertImage', url, filename);//For more detailed explanation, see the official website API document 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) { //Upload the image to the server, using the formData object. As for compatibility... It is said that it is not very friendly to low-version IE 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 the simplest image upload function, which has poor compatibility and does not consider the error exception prompts at all... Please modify it yourself as needed

The simple way to implement the image upload function in Summernote is the entire content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.