百度编辑器umeditor使用总结
2024-03-18 21:25:34
百度编辑器是一个功能很全、很强大。
百度单张图片上传只能存储在项目下面，而不能独立自定义存储位置，因此重写上传代码
百度文章中的图片是通过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;
}
}
最新文章
- 用CSS3动画特效实现弹窗效果
- [No000004]在WIN7/8任务栏创建快捷方式
- ubuntu12.04安装svn 1.7(转载)
- hdu2011
- ssanf()的用法
- Linux下 静态链接库 和 动态链接库
- oracle实用基础
- cloud9 ide
- 1013团队Beta冲刺day5
- TensorFlow-谷歌深度学习库 命令行参数
- An internal error occurred during: Initializing Java Tooling.
- JavaScript 为什么要有 Symbol 类型？
- Torch功能点记录
- Cygwin配置总结
- [UE4]Input Key Selector
- Swift5 语言指南(二) 版本兼容性
- LINQ 小项目【组合查询、分页】
- javac编译出现需要标识符问题解决
- MATLAB二分法函数求根
- P1679 神奇的四次方数