JavaWeb集成百度UMEditor简易富文本编辑器
1.下载UMEditor
地址:http://ueditor.baidu.com/website/download.html#mini
选择Jsp,UTF-8版本
2.解压
解压文件,把解压完成 的文件夹改名为 ‘ueditor‘,
3.部署
把ueditor文件夹拷贝到WebRoot下,把jsp文件夹下自带的jar包:ueditor-mini.jar,commons-fileupload-1.2.2.jar,复制到WebRoot->WEB-INF->lib文件夹下
4.使用
在jsp中引入UEditor的js和css
<link href='ueditor/themes/default/css/umeditor.css' type="text/css" rel="stylesheet" >
<script type="text/javascript" src="ueditor/jquery.js"></script>
<script type="text/javascript" src="ueditor/umeditor.js"></script>
<script type="text/javascript" src="ueditor/umeditor.config.js"></script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
页面中使用方法:
<textarea id="myEditor" style="width: 100%;height: 500px;"></textarea>
<script type="text/javascript">
//实例化UEditor
var ue = UM.getEditor('myEditor');
</script>
5.设置和读取编辑器的内容
var stem = UM.getEditor('myEditor').getContent();
UM.getEditor('myEditor').setContent($( "#myEditorValue" ).val());
6.上传图片的问题
由于有些Struts对页面提交的参数进行了拦截,所以需要在struts.xml中加入
<constant name="struts.action.excludePattern" value="/.*" />
7.附上图片上传Java类
Uploader.java
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 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 HttpServletRequest request = null;
private String title = "";
// 保存路径
private String savePath = "upload";
// 文件允许格式
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");
HttpServletRequest httpRequest=(HttpServletRequest)request;
FileItemIterator fii = sfu.getItemIterator(httpRequest);
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);
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());
File dir = new File(this.getPhysicalPath(path));
if (!dir.exists()) {
try {
dir.mkdirs();
} catch (Exception e) {
this.state = this.errorInfo.get("DIR");
return "";
}
}
return path;
}
/**
* 根据传入的虚拟路径获取物理路径
*
* @param path
* @return
*/
private String getPhysicalPath(String path) {
String servletPath = this.request.getServletPath();
String 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;
}
}
相关推荐
Java Web 富文本编辑器(KindEditor) Java Web 富文本编辑器(KindEditor)是基于 Java Web 开发的富文本编辑器解决方案,旨在解决开发过程中的编辑功能、图片文件等操作。通过使用 KindEditor,可以快速实现富...
总的来说,这个JavaWeb使用FCKeditor的实例提供了一个从零开始集成富文本编辑器的实践过程,帮助开发者了解如何在实际项目中实现用户友好的文本编辑功能。通过这个实例,你可以深入学习到JavaScript与JavaWeb应用的...
这些编辑器允许用户在浏览器端进行富文本编辑,生成HTML代码,然后发送到服务器进行存储或处理。本文将深入探讨Java Web文本编辑器的相关知识点,包括其工作原理、主要功能、常见类型以及如何在JSP中集成和使用。 1...
javaweb毕业设计-文本编辑器(可做课程设计).rarjavaweb毕业设计-文本编辑器(可做课程设计).rarjavaweb毕业设计-文本编辑器(可做课程设计).rarjavaweb毕业设计-文本编辑器(可做课程设计).rarjavaweb毕业设计-文本编辑...
这些库通常提供一个JavaScript接口,用于在前端创建和管理富文本编辑器,并通过AJAX将内容提交到后端服务器进行处理和存储。例如,TinyMCE是一个流行的开源富文本编辑器,它支持多种语言,且具有高度可定制性。 在...
**wangEditor:Web富文本编辑器详解** wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器,专为简化开发者的工作而设计。它以其轻量级、简洁的代码结构、易用性和开源免费的特性,受到了众多Web开发者的...
KindEditor是一款广泛使用的开源富文本编辑器,适用于多种编程语言环境,包括Java。在这个例子中,我们看到它与JSP(JavaServer Pages)结合使用,尽管其核心逻辑可以轻松地转化为Servlet来实现。 1. **JSP基础**:...
【标题】:“javaweb仿百度云网盘项目源码”是一个基于Java Web技术实现的类似于百度云网盘的项目,旨在提供文件存储、管理和分享的功能。该项目利用了多种技术框架,包括Maven、Struts2、Spring和MyBatis,以及...
Ueditor是由百度开发的一款开源的在线富文本编辑器,它提供了丰富的API和配置选项,支持多种功能,如图片上传、代码高亮、表格操作等。 首先,你需要下载Ueditor的最新版本压缩包,解压后你会看到一个名为"Page"的...
3. **富文本编辑器集成**:在JSP页面中,通过引入富文本编辑器的JavaScript库,设置一个textarea元素,并配置编辑器,使其能够处理用户的输入。提交时,富文本编辑器会将格式化的内容转换为HTML字符串,一同发送到...
"百度地图javaweb"项目就是这样一个示例,它结合了百度地图API,为用户提供了一种在Web应用中查找路线、计算距离和时间的功能。下面将详细阐述相关知识点。 1. **百度地图API**:百度地图API是百度提供的一个开放...
总的来说,"文字编辑器应用项目"是一个集成了ueditor的JavaWeb实践案例,不仅展示了富文本编辑器的使用,还涵盖了JavaWeb的基础知识,对于学习和开发Web应用的初学者极具价值。通过深入研究和实践,可以提升Web开发...
下载 UEditor 最新版 ... ,选择下载,进入下载页面,选择jsp最新版本 解压后,将文件放入项目中。 如我解压后,将文件名字改为“ueditor”,放入到我的项目中。 ...3.添加ueditor的相关 jar包 将下载下来的文件中 ...
在这个场景下,我们关注的是一个名为"JavaWeb简易留言系统"的项目,它利用了JSP(JavaServer Pages)、Servlet和JavaBean这三种核心技术。下面将详细阐述这些技术以及它们在构建留言系统中的作用。 首先,JSP是Java...
基于javaweb的仿照百度网盘的小型云盘系统源码+sql数据库.zip基于javaweb的仿照百度网盘的小型云盘系统源码+sql数据库.zip基于javaweb的仿照百度网盘的小型云盘系统源码+sql数据库.zip基于javaweb的仿照百度网盘的...
在本项目中,"JavaWeb+Mysql实现简易商城系统"是一个典型的Web应用程序开发实例,它结合了JavaWeb技术和MySQL数据库来构建一个基础的在线购物平台。以下将详细阐述涉及的知识点。 1. **JavaWeb**: - **Servlet与...
这个程序实现了基本的聊天功能,可以让用户之间进行实时的文本交流,是学习JavaWeb技术的一个良好实践案例。 首先,我们要理解JavaWeb的基本构成。JavaWeb开发通常涉及到Servlet、JSP(JavaServer Pages)、...