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;
    	}
    }
    










  • 相关阅读:
    Dot Net WinForm 控件开发 (七) 为属性提下拉式属性编辑器
    WinForm 程序的界面多语言切换
    c#遍历HashTable
    Dot Net WinForm 控件开发 (三) 自定义类型的属性需要自定义类型转换器
    Dot Net WinForm 控件开发 (六) 为属性提供弹出式编辑对话框
    Dot Net WinForm 控件开发 (一) 写一个最简单的控件
    Dot Net WinForm 控件开发 (四) 设置属性的默认值
    Dot Net WinForm 控件开发 (二) 给控件来点描述信息
    Dot Net WinForm 控件开发 (八) 调试控件的设计时行为
    Dot Net WinForm 控件开发 (五) 复杂属性的子属性
  • 原文地址:https://www.cnblogs.com/wala-wo/p/5119191.html
Copyright © 2011-2022 走看看