사진 업로드를위한 비교적 완전한 SummerNote 사례는 배경이 없습니다 (온라인으로 사진을 업로드하는 경우가 너무 많음), 프론트 엔드 JS 만 있습니다. 온라인으로 제공되었지만 버그가있는 코드는 고정되어 있습니다.
이 예에서 JS는 오류를 보장하지 않습니다. 개인 테스트 사용 가능
<%@ page language = "java"contmenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <! doctype html> <html> <head> <scrc = "// code.jquery.com/jquery-1.9.1.min.script> <incript> <link href = "// netdna.bootstrappcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"rel = "Stylesheet"type = "text/css"> <script src = "// netdna.bootstrappcdn.com/bootstrap/3.0.1/js/bootstrap.min.js">/script> href ="// netdna.bootstrappcdn.com/font-awesome/4.0.3/css/font-aweanteme.min.css "styleshe" type = "text/css"> <!-필자-> <link href = "SummerNote-Master/Dist/SummerNote.css"rel = "StylESheet"type = "text/css"> <!-필수-> <script src = "SummerNote-master/dist/summernote.js"> </script> <! -------> <cript SRC = "SummerNote-Master/Lang/SummerNote-Zh-Zh-CN.JS"> </script> <title> bootstrap-markdown </title> <style> .note-alarm {float : right; margin-top : 10px; margin-right : 10px;} </style> </head> <div id = "SummerNote"> DriverNote "> type = "text /javaScript"> $ (document) .ready (function () { /* function sendfile (파일, 편집기, weledible) {console.log ( "file ="+file); console.log ( "editor ="+editor); console.log ( "weledible ="+weledable); data.append ( "blog_image ("); $ .ajax ({url : 'blog_images.jsp', 데이터 : 데이터, 캐시 : false, contenttype : false, processData : false : 'post', success (data) {editor.insertimage (weledable, data.url);}} ( '#summernote'); 'zh-cn', // default : 'en-us'focus : true, 툴바 : [ '스타일', [ 'bold', 'itallic', '밑줄', '명확한']], [ 'fontsize', [ 'fontsize'], [ 'color', [ 'color'], [ 'para', [ 'ul', '' '' ',' ',', '', '', '', '', '', '', '', [ '삽입', [그림 ','비디오 ']], /*이미지 : {selectfromfiles :'select file '},* / /*onimageupload : sendfile (files [0], 편집자, weledible) (filber, editable); });}); 함수 sendfile (파일, 편집기, $ editable) {$ ( ". note-toolbar.btn-toolbar"). Append ( '업로드 이미지'); var filename = false; try {filename = file [ 'name']; Alert (filename); {filename = false;} if (! filename) {$ ( ". note-alarm"). remove ();} // 위의 위의 var ext = filename.substr (filename.lastindexof ( ")); ext = ext.touppercase (); var timestamp = new gett. (). timestamp+"_"+$ ( "#summernote"). attr ( 'aid')+ext; // 이름은 파일 이름이며, 혼자서 정의됩니다. AID는 파일 사용자를 구별하기 위해 추가 한 속성입니다. data = new formdata (); data.append ( "file", file); data.append ( "key", name); data.append ( "#summernote"). attr ( 'token')); $. ajax ({data : data : "post :"/summernote/fileUpload ", // url upload is the the the the the the the the the the the pather the the the the the pathloads ajax hod STEP. $ ( '#SummerNote'). SummerNote ( 'editor.insertimage', "http://res.cloudinary.com/demo/image/upload/butterfly.jp");$(".note-alarm").html (”upload, 기다려주세요 로드 "); settimeout (function () {$ (". note-alarm "). remove ();}, 3000);}, error : function () {$ (". note-alarm "). html ("업로드 실패 "); settimeout (function () {$ (". note-alarm "). remove ();}, 3000);});} </script> </body> </html>위의 기사는 오류를보고하지 않는 간단한 SummerNote 이미지 업로드 케이스입니다. 이것은 내가 당신과 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.