一个简单不报错的summernote 图片上传案例
一个比较完整的summernote上传图片的案例,没有后台(上传图片网上案例太多),只有前端js.修正了网上提供的,但是有bug的代码。
这个例子,js保证不报错。亲测可用
<%@pagelanguage="java"contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPEhtml> <html> <head> <scriptsrc="https://code.jquery.com/jquery-1.9.1.min.js"></script> <linkhref="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"rel="stylesheet"type="text/css"> <scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <linkhref="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"rel="stylesheet"type="text/css"><!--必须--> <linkhref="summernote-master/dist/summernote.css"rel="stylesheet"type="text/css"><!--必须--> <scriptsrc="summernote-master/dist/summernote.js"></script><!--必须--> <scriptsrc="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> <divid="summernote"></div> <scripttype="text/javascript"> $(document).ready(function(){ /*functionsendFile(file,editor,welEditable){ console.log("file="+file); console.log("editor="+editor); console.log("welEditable="+welEditable); data=newFormData(); 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); } }); }); functionsendFile(file,editor,$editable){ $(".note-toolbar.btn-toolbar").append('正在上传图片'); varfilename=false; try{ filename=file['name']; alert(filename); }catch(e){filename=false;} if(!filename){$(".note-alarm").remove();} //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误 varext=filename.substr(filename.lastIndexOf(".")); ext=ext.toUpperCase(); vartimestamp=newDate().getTime(); varname=timestamp+"_"+$("#summernote").attr('aid')+ext; //name是文件名,自己随意定义,aid是我自己增加的属性用于区分文件用户 data=newFormData(); 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图片上传案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。