zoukankan      html  css  js  c++  java
  • 百度编辑器umeditor使用总结

           百度编辑器是一个功能很全、很强大。

    百度单张图片上传只能存储在项目下面,而不能独立自定义存储位置,因此重写上传代码

    百度文章中的图片是通过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;
    	}
    }
    










  • 相关阅读:
    Flutter移动电商实战 --(40)路由_Fluro的全局注入和使用方法
    Flutter移动电商实战 --(39)路由_Fluro的路由配置和静态化
    Flutter移动电商实战 --(38)路由_Fluro中Handler编写方法
    Flutter移动电商实战 --(37)路由_Fluro引入和商品详细页建立
    网络基础:NetBIOS
    linux 定时任务
    linux useradd 命令基本用法
    Git undo 操作
    Git 查看文件的历史
    Ubuntu14.04安装postgresql9.4
  • 原文地址:https://www.cnblogs.com/wala-wo/p/5119191.html
Copyright © 2011-2022 走看看