1 the online HTML document editor uses the Getting Started image upload and image management implementation:2Official website: http://kindeditor.net/demo.php3 Development steps:41only selected files need to be imported in development (usually under WebApp, create Editor folder)5Import: lang, plugins, themes, kindeditor.js/kindeditor-min.js-->put it under the editor folder62. Introduce the relevant js& on the pagecss File7<!--import Kindeditor related files--8<script type= "Text/javascript" src= ". /.. /editor/lang/zh_cn.js "></script>9<script type= "Text/javascript" src= ". /.. /editor/kindeditor.js "></script>Ten<link rel= "stylesheet" href= ". /.. /editor/themes/default/default.css "/> One3. Provide label on the page <textarea id= "ta" name= "ta" ></textarea> A Kindeditor.ready (function (K) { -Window.editor = K.create ("#ta"); -4The Customize toolbar button displays: the Kindeditor.ready (function (K) { -Window.editor = K.create ("#ta", { -Items: [' source ', ' | ', ' undo ', ' Redo ', ' | ', ' preview ', ' print ', ' template ', ' Code ', ' Cut ', ' copy ', ' Paste ', -' Plainpaste ', ' wordpaste ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ', +' Justifyfull ', ' insertorderedlist ', ' insertunorderedlist ', ' Indent ', ' outdent ', ' subscript ', -' Superscript ', ' clearhtml ', ' Quickformat ', ' selectall ', ' | ', ' fullscreen ', '/', +' Formatblock ', ' fontname ', ' fontsize ', ' | ', ' forecolor ', ' hilitecolor ', ' bold ', A' Italic ', ' underline ', ' strikethrough ', ' lineheight ', ' removeformat ', ' | ', ' image ', ' multiimage ', at' Flash ', ' media ', ' insertfile ', ' table ', ' hr ', ' emoticons ', ' baidumap ', ' pagebreak ', -' Anchor ', ' link ', ' unlink ', ' | ', ' about ' -],allowfilemanager:true, -Uploadjson: ". /.. /image_upload.action ", -Filemanagerjson: ". /.. /image_manager.action " - }); in5upload images and image management features: - page provides the corresponding method: toAllowfilemanager, Uploadjson, filemanagerjson-->send request to Background action processing: + //provides attribute injection - PrivateFile Imgfile; the PrivateString Imgfilefilename; * PrivateString Imgfilecontenttype; $ //Image Upload MethodPanax Notoginseng@Action (value = "Image_upload", results = {@Result (name = "Success", type = "JSON") }) - PublicString uploadimg ()throwsIOException { theSystem.out.println ("File:" +imgfile); +System.out.println ("File name:" +imgfilefilename); ASystem.out.println ("File type:" +imgfilecontenttype); theString Savepath =Servletactioncontext.getservletcontext (). Getrealpath ( +"/upload/"); -String Saveurl =servletactioncontext.getrequest (). Getcontextpath () $+Savepath; $ //generate the picture name immediately -UUID Randomuuid =Uuid.randomuuid (); -String ext =Imgfilefilename the. substring (Imgfilefilename.lastindexof (".")); -String Randomurl = Randomuuid +ext;Wuyi //Save Picture (absolute path and) theFileutils.copyfile (Imgfile,NewFile (Savepath + "/" +randomurl)); - //return browser data (file upload succeeded or failed) Wumap<string, object> map =NewHashmap<string, object>(); -Map.put ("error", 0); AboutMap.put ("url", Saveurl +randomurl); $ Servletactioncontext.getcontext (). Getvaluestack (). push (map); - returnSUCCESS; - } - A //Image Management Methods +@Action (value = "Image_manager", results = {@Result (name = "Success", type = "JSON") }) the PublicString Manager () { - //root directory path (absolute path) $String RootPath =Servletactioncontext.getservletcontext (). Getrealpath ( the"/") the+ "upload/"; the //root directory URL (absolute path) theString Rooturl =servletactioncontext.getrequest (). Getcontextpath () -+ "/upload/"; inlist<map<string, object>> fileList =NewArraylist<map<string, object>>(); the //Current Upload directory theFile Currentpathfile =NewFile (rootpath); About //the image's extension thestring[] FileTypes =NewString[] {"gif", "JPG", "JPEG", "PNG", "BMP" }; the the if(Currentpathfile.listfiles ()! =NULL) { + //traverse directory to fetch file information - for(File file:currentPathFile.listFiles ()) { theMap<string, object> hash =NewHashmap<string, object>();BayiString FileName =file.getname (); the if(File.isdirectory ()) { theHash.put ("Is_dir",true); -Hash.put ("Has_file", (file.listfiles ()! =NULL)); -Hash.put ("FileSize", 0L); theHash.put ("Is_photo",false); theHash.put ("filetype", "" "); the}Else if(File.isfile ()) { theString Fileext =filename.substring ( -Filename.lastindexof (".") + 1). toLowerCase (); theHash.put ("Is_dir",false); theHash.put ("Has_file",false); theHash.put ("FileSize", File.length ());94Hash.put ("Is_photo", arrays.<string>aslist (filetypes) the . Contains (Fileext)); theHash.put ("filetype", fileext); the }98Hash.put ("filename", fileName); AboutHash.put ("datetime", - NewSimpleDateFormat ("Yyyy-mm-dd HH:mm:ss"). Format (File101 . LastModified ()));102 Filelist.add (hash);103 }104 } themap<string, object> result =NewHashmap<string, object>();106Result.put ("Moveup_dir_path", "" ");107Result.put ("Current_dir_path", RootPath);108Result.put ("Current_url", Rooturl);109Result.put ("Total_count", Filelist.size ()); theResult.put ("File_list", fileList);111 Actioncontext.getcontext (). Getvaluestack (). push (result); the returnSUCCESS;113 } the
The implementation of image uploading and image management for getting started with the online HTML document editor