百度编辑器是一个功能很全、很强大。
百度单张图片上传只能存储在项目下面,而不能独立自定义存储位置,因此重写上传代码
百度文章中的图片是通过base64实现的,直接存储在数据库中
tomcat通过虚拟路径实现将静态资源从项目中独立出来,避免更新项目解压war后文件丢失
umeditor 配置都是在umeditor.config.js
//图片上传配置区
,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址
,imagePath:URL + "jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
定义文件位置
window.UMEDITOR_CONFIG[\'imagePath\'] = "/upload";
如何生成umeditor实例
var um = UM.getEditor(\'myEditor\'); um.addListener(\'blur\',function(){ var editorContent = UM.getEditor(\'myEditor\').getContent(); if(editorContent != ""){ editorContent = filterHtml(editorContent); $("#myEditorContent").val(escape(editorContent)); } });
文章内容含有图片时,百度编辑器通过对图片进行base64编码,然后跟随文章内容一起保存在数据库中。
若是通过图片上传按钮插件,支持,php,asp,jsp接收,这样主要讲jsp,返回通过jsonp方式回调方法。image.js进行图片的上传和回调插入文章内容中
request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); Uploader up = new Uploader(request); up.setSavePath("upload"); String[] fileType = {".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp"}; up.setAllowFiles(fileType); up.setMaxSize(10000); //单位KB up.upload(); String callback = request.getParameter("callback"); String result = "{\"name\":\""+ up.getFileName() +"\", \"originalName\": \""+ up.getOriginalName() +"\", \"size\": "+ up.getSize() +", \"state\": \""+ up.getState() +"\", \"type\": \""+ up.getType() +"\", \"url\": \""+ up.getUrl() +"\"}"; result = result.replaceAll( "\\\\", "\\\\" ); if( callback == null ){ response.getWriter().print( result ); }else{ response.getWriter().print("<script>"+ callback +"(" + result + ")</script>"); }
接收图片并保存到的代码是
package com.baidu.ueditor.um; import java.io.*; import java.text.SimpleDateFormat; import java.util.*; import org.apache.commons.fileupload.*; import org.apache.commons.fileupload.FileUploadBase.InvalidContentTypeException; import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException; import org.apache.commons.fileupload.util.*; import org.apache.commons.fileupload.servlet.*; import org.apache.commons.fileupload.FileItemIterator; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import com.moral.util.Common; import com.moral.util.Constants; import sun.misc.BASE64Decoder; import javax.servlet.http.HttpServletRequest; /** * UEditor文件上传辅助类 * 实现支持独立定义上传文件的路径 * */ public class Uploader { // 输出文件地址 private String url = ""; // 上传文件名 private String fileName = ""; // 状态 private String state = ""; // 文件类型 private String type = ""; // 原始文件名 private String originalName = ""; // 文件大小 private long size = 0; /*是否指定而外的绝对路径*/ private String physicalPath = Constants.Html.EDITOR_UPLOAD_PATH; private HttpServletRequest request = null; private String title = ""; //百度插件默认的图片在项目中保存路径 private String savePath = "upload"; /*自定义的独立的存储路径,目的是在重新发布后仍然保存有这些图片,避免文件丢失*/ private String aliasPath = ""; // 文件允许格式 private String[] allowFiles = { ".rar", ".doc", ".docx", ".zip", ".pdf",".txt", ".swf", ".wmv", ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; // 文件大小限制,单位KB private int maxSize = 10000; private HashMap<String, String> errorInfo = new HashMap<String, String>(); public Uploader(HttpServletRequest request) { this.request = request; HashMap<String, String> tmp = this.errorInfo; tmp.put("SUCCESS", "SUCCESS"); //默认成功 tmp.put("NOFILE", "未包含文件上传域"); tmp.put("TYPE", "不允许的文件格式"); tmp.put("SIZE", "文件大小超出限制"); tmp.put("ENTYPE", "请求类型ENTYPE错误"); tmp.put("REQUEST", "上传请求异常"); tmp.put("IO", "IO异常"); tmp.put("DIR", "目录创建失败"); tmp.put("UNKNOWN", "未知错误"); } public void upload() throws Exception { boolean isMultipart = ServletFileUpload.isMultipartContent(this.request); if (!isMultipart) { this.state = this.errorInfo.get("NOFILE"); return; } DiskFileItemFactory dff = new DiskFileItemFactory(); String savePath = this.getFolder(this.savePath); dff.setRepository(new File(savePath)); try { ServletFileUpload sfu = new ServletFileUpload(dff); sfu.setSizeMax(this.maxSize * 1024); sfu.setHeaderEncoding("utf-8"); FileItemIterator fii = sfu.getItemIterator(this.request); while (fii.hasNext()) { FileItemStream fis = fii.next(); if (!fis.isFormField()) { this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1); if (!this.checkFileType(this.originalName)) { this.state = this.errorInfo.get("TYPE"); continue; } this.fileName = this.getName(this.originalName); this.type = this.getFileExt(this.fileName); this.url = savePath + "/" + this.fileName; BufferedInputStream in = new BufferedInputStream(fis.openStream()); File file = new File(this.getPhysicalPath(this.url)); FileOutputStream out = new FileOutputStream( file ); BufferedOutputStream output = new BufferedOutputStream(out); Streams.copy(in, output, true); /*复制文件到指定目录下*/ Common.copyFile(this.getPhysicalPath(this.url), this.aliasPath + "/" + this.fileName, true); this.state=this.errorInfo.get("SUCCESS"); this.size = file.length(); //UE中只会处理单张上传,完成后即退出 break; } else { String fname = fis.getFieldName(); //只处理title,其余表单请自行处理 if(!fname.equals("pictitle")){ continue; } BufferedInputStream in = new BufferedInputStream(fis.openStream()); BufferedReader reader = new BufferedReader(new InputStreamReader(in)); StringBuffer result = new StringBuffer(); while (reader.ready()) { result.append((char)reader.read()); } this.title = new String(result.toString().getBytes(),"utf-8"); reader.close(); } } } catch (SizeLimitExceededException e) { this.state = this.errorInfo.get("SIZE"); } catch (InvalidContentTypeException e) { this.state = this.errorInfo.get("ENTYPE"); } catch (FileUploadException e) { this.state = this.errorInfo.get("REQUEST"); } catch (Exception e) { this.state = this.errorInfo.get("UNKNOWN"); } } /** * 接受并保存以base64格式上传的文件 * @param fieldName */ public void uploadBase64(String fieldName){ String savePath = this.getFolder(this.savePath); String base64Data = this.request.getParameter(fieldName); this.fileName = this.getName("test.png"); this.url = savePath + "/" + this.fileName; BASE64Decoder decoder = new BASE64Decoder(); try { File outFile = new File(this.getPhysicalPath(this.url)); OutputStream ro = new FileOutputStream(outFile); byte[] b = decoder.decodeBuffer(base64Data); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) { b[i] += 256; } } ro.write(b); ro.flush(); ro.close(); this.state=this.errorInfo.get("SUCCESS"); } catch (Exception e) { this.state = this.errorInfo.get("IO"); } } /** * 文件类型判断 * * @param fileName * @return */ private boolean checkFileType(String fileName) { Iterator<String> type = Arrays.asList(this.allowFiles).iterator(); while (type.hasNext()) { String ext = type.next(); if (fileName.toLowerCase().endsWith(ext)) { return true; } } return false; } /** * 获取文件扩展名 * * @return string */ private String getFileExt(String fileName) { return fileName.substring(fileName.lastIndexOf(".")); } /** * 依据原始文件名生成新文件名 * @return */ private String getName(String fileName) { Random random = new Random(); return this.fileName = "" + random.nextInt(10000) + System.currentTimeMillis() + this.getFileExt(fileName); } /** * 根据字符串创建本地目录 并按照日期建立子目录返回 * @param path * @return */ private String getFolder(String path) { SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd"); path += "/" + formater.format(new Date()); System.out.println(this.getPhysicalPath(path)); File dir = new File(this.getPhysicalPath(path)); if (!dir.exists()) { try { dir.mkdirs(); } catch (Exception e) { this.state = this.errorInfo.get("DIR"); return ""; } } this.aliasPath = this.physicalPath + "/" + path; System.out.println("aliasPath="+aliasPath); File aliasDir = new File(this.aliasPath); if(!aliasDir.exists()){ try { aliasDir.mkdirs(); } catch (Exception e) { e.printStackTrace(); } } return path; } /** * 根据传入的虚拟路径获取物理路径 * * @param path * @return */ private String getPhysicalPath(String path) { String realPath = ""; String servletPath = this.request.getServletPath(); realPath = this.request.getSession().getServletContext() .getRealPath(servletPath); return new File(realPath).getParent() +"/" +path; } public void setSavePath(String savePath) { this.savePath = savePath; } public void setAllowFiles(String[] allowFiles) { this.allowFiles = allowFiles; } public void setMaxSize(int size) { this.maxSize = size; } public long getSize() { return this.size; } public String getUrl() { return this.url; } public String getFileName() { return this.fileName; } public String getState() { return this.state; } public String getTitle() { return this.title; } public String getType() { return this.type; } public String getOriginalName() { return this.originalName; } public String getPhysicalPath() { return physicalPath; } public void setPhysicalPath(String physicalPath) { this.physicalPath = physicalPath; } }