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

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

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

百度编辑器umeditor使用总结的更多相关文章

  1. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  2. yii2整合百度编辑器umeditor

    作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...

  3. 一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器

    前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...

  4. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  5. yii2-Ueditor百度编辑器

    今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. 资源下载 yii2.0-ueditor下载路径: https://link.jiansh ...

  6. 关于百度编辑器UEditor的一点说明

    大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示, ...

  7. 百度编辑器ueditor插入表格没有边框颜色的解决方法

    附:从word excel 中 复制的表格提交后无边框,参考这个同学的,写的很详细:   http://blog.csdn.net/lovelyelfpop/article/details/51678 ...

  8. 百度编辑器UEditor的使用方法

    百度编辑器具有丰富文本编辑功能,且开源免费,其使用方法如下: 1.在官网上下载对应的Uditor压缩包:http://ueditor.baidu.com/website/download.html 2 ...

  9. 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法 2015-01-06 09:24 98人阅读 评论(0) 收藏

    百度富文本编辑器..很强大.. - - ,不过有些BUG..真的很无解.. 最近用这个,发现上传的表格全部没有表框.. 解决办法如下: 转载的.. 百度编辑器ueditor插入一个表格后,在编辑过程中 ...

随机推荐

  1. JavaScript功能一览

    // 10) throw "太大"; if(x0) { c_start=document.cookie.indexOf(c_name + "=") if (c_ ...

  2. Github是什么?看完你就了解一些了

    要了解Github,我们首先要知道Git,Git是管理代码的工具,写代码不是件轻松的事儿,一个人写的时候已经不轻松了,一群人写就更不轻松了,但这世界上很多事都是怎么不轻松怎么来的,大部分人都会和别人一 ...

  3. memcached SASL验证状态安全绕过漏洞

    漏洞版本: memcached 1.x 漏洞描述: Memcached是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. Memcached在处理链接的SASL验证状态时存在错 ...

  4. 白书P61 - 点集配对问题

    白书P61 - 点集配对问题 状压DP #include <iostream> #include <cstdio> #include <cstring> using ...

  5. 【转】Mac不能复制拷贝写入文件到移动硬盘,U盘怎么办 |

    原文网址:http://jingyan.baidu.com/article/a3aad71aa1dde7b1fb0096ab.html 有的小伙伴把移动硬盘或 U 盘接入到 Mac 电脑上,当把文件拷 ...

  6. C# MVC模式下商品抽奖

    很久没有写博客,于是就把最近项目需求的一个抽奖功能给整理了下,语言表达能力不好,写的不好请勿吐槽,一笑而过就好.好了下面开始说说这个抽奖功能.因为涉及到公司的项目所以一些敏感的地方均已中文代替. 首先 ...

  7. Test Controller Tool

  8. Unity4.3.3 烘焙踩坑

    许久没发文章了,开始实习了,挺忙的基本没什么时间了 unity4.3.3是一个非常古老的版本了,弄了一下烘焙,踩了不少坑, 首先是unity自带的nature shader,其中有soft occlu ...

  9. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程04:技能的输入与检测》

    4.技能的输入与检测 概述: 技能系统的用户体验,制约着玩家对整个游戏的体验.游戏角色的技能华丽度,连招的顺利过渡,以及逼真的打击感,都作为一款游戏的卖点吸引着玩家的注意.开发者在开发游戏初期,会根据 ...

  10. 【Java基础】Java多线程小结

    在说多线程之前,首先要清楚为啥要提出多线程,这就要明白线程和进程间的区别了. 线程和进程间的区别 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单 ...