一個比較完整的summernote上傳圖片的案例，沒有後台（上傳圖片網上案例太多），只有前端js.修正了網上提供的，但是有bug的代碼。
這個例子，js保證不報錯。親測可用
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html ><html><head><script src="//code.jquery.com/jquery-1.9.1.min.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"><!--必須--><link href="summernote-master/dist/summernote.css" rel="stylesheet" type="text/css"><!--必須--><script src="summernote-master/dist/summernote.js"></script><!--必須--><script src="summernote-master/lang/summernote-zh-CN.js"></script><title>bootstrap-markdown</title><style>.note-alarm {float: right;margin-top: 10px;margin-right: 10px;}</style></head><body> <div id="summernote"></div><script type="text/javascript">$(document).ready(function() { /* function sendFile(file, editor,welEditable) { console.log("file="+file); console.log("editor="+editor); console.log("welEditable="+welEditable); data = new FormData(); data.append("blog_image[image]", file); $.ajax({ url: 'blog_images.jsp', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ editor.insertImage(welEditable, data.url); } }); }*/ $('#summernote').summernote({ height: 300, /*高さを指定*/ lang: 'zh-CN', // default: 'en-US' focus:true, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']], ['insert', ['picture', 'video']] ], /* image: { selectFromFiles: '選擇文件' }, */ /*onImageUpload: function(files, editor, welEditable) { sendFile(files[0], editor,welEditable); }*/ onImageUpload: function(files, editor, $editable) { sendFile(files[0],editor,$editable); } });});function sendFile(file, editor, $editable){$(".note-toolbar.btn-toolbar").append('正在上傳圖片');var filename = false;try{filename = file['name'];alert(filename);} catch(e){filename = false;}if(!filename){$(".note-alarm").remove();}//以上防止在圖片在編輯器內拖拽引發第二次上傳導致的提示錯誤var ext = filename.substr(filename.lastIndexOf("."));ext = ext.toUpperCase();var timestamp = new Date().getTime();var name = timestamp+"_"+$("#summernote").attr('aid')+ext;//name是文件名，自己隨意定義，aid是我自己增加的屬性用於區分文件用戶data = new FormData();data.append("file", file);data.append("key",name);data.append("token",$("#summernote").attr('token'));$.ajax({data: data,type: "POST",url: "/summernote/fileupload", //圖片上傳出來的url，返回的是圖片上傳後的路徑，http格式contentType: "json",cache: false,processData: false,success: function(data) {//data是返回的hash,key之類的值，key是定義的文件名alert(data);//把圖片放到編輯框中。editor.insertImage 是參數，寫死。後面的http是網上的圖片資源路徑。//網上很多就是這一步出錯。$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");$(".note-alarm").html("上傳成功,請等待加載");setTimeout(function(){$(".note-alarm").remove();},3000);},error:function(){$(".note-alarm").html("上傳失敗");setTimeout(function(){$(".note-alarm").remove();},3000);}});}</script></body></html>以上這篇一個簡單不報錯的summernote 圖片上傳案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。