百度UEditor开发案例(JSP)

本案例的开发环境:MyEclipse+tomcat+jdk

    本案例的开发内容:
  1. 用百度编辑器发布新闻(UEditor的初始化开发部署)
  2. 编辑已发过的新闻(UEditor的应用——编辑旧文章)
  3. 上传附件、图片等
     由于百度编辑器强大的功能,web开发爱好者无不喜爱。但网上关于其开发的具体细节或整个项目的开发案例并不是很多,因此写下这篇简单开发百度编辑器UEditor的案例。
     此案例只是简单的应用Ueditor,仅供参考。

 

    
    项目名称:UEditorCase
    项目组织结构图:

   (一)UEditor的开发部署

           到官方网站下载ueditor jsp(utf-8)版开发包。ueditor1_2_5_0-utf8-jsp
           如左图,我是放在ueditor文件夹下
         
         index.jsp页面代码编写:
              

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>百度编辑器开发实例</title>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<scripttype="text/javascript"src="ueditor/editor_config.js"></script>
<scripttype="text/javascript"src="ueditor/editor_all.js"></script>
<LINKrel=stylesheethref="ueditor/themes/default/css/ueditor.css">
</head>

<body>
<formaction="publish.action"method="post">
类别: <inputtype="text"name="category"/><br/>
标题:<inputtype="text"name="title"/><br/>

<textareaname="content"id="myEditor">这里写你的初始化内容</textarea>
<scripttype="text/javascript">
var editor =new UE.ui.Editor();
editor.render("myEditor");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor(‘myEditor‘)
</script>
<inputtype="submit"value="提交"/>

</form>

</body>
</html>

 

配置editor_config.js文件

      找到:

URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");

      将其改为:

URL = window.UEDITOR_HOME_URL||"/UEditorCase/ueditor/";

 
PublishAction.java代码:

package xiaoxiao.action;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;

import org.apache.struts2.ServletActionContext;
import org.apache.taglibs.standard.lang.jstl.test.PageContextImpl;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

publicclassPublishActionextendsActionSupport{
privateString category;
privateString title;
privateString content;
publicString getCategory(){
return category;
}
publicvoid setCategory(String category){
this.category = category;
}
publicString getTitle(){
return title;
}
publicvoid setTitle(String title){
this.title = title;
}
publicString getContent(){
return content;
}
publicvoid setContent(String content){
this.content = content;
}

@Override
publicString execute()throwsException{
// System.out.println("category:"+category);
// System.out.println("title"+title);
// System.out.println("content"+content);
// String Date=new SimpleDateFormat("yyyy-MM-dd").format(new Date());
// String realPath = ServletActionContext.getRequest().getRealPath("/upload")+"/"+Date;
// System.out.println("路径"+realPath);


ActionContext cxt=ActionContext.getContext();
Map request=(Map)cxt.get("request");

request.put("category", category);
request.put("title", title);
request.put("content", content);
return SUCCESS;


}


}

 

struts.xml文件配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<packagename="strus"extends="struts-default">


<actionname="publish"class="xiaoxiao.action.PublishAction">
<resultname="success">/show.jsp</result>

<!-- <result name="success">/editorUpdate.jsp</result> -->
</action>

</package>


</struts>

 
show.jsp

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"
+ request.getServerName()+":"+ request.getServerPort()
+ path +"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>信息发布</title>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<styletype="text/css">
#showContent {
WIDTH:1000px;
BACKGROUND:#e4eefa;
FLOAT: left;
border:1px solid #FC9;
}

#showContent {

MARGIN-BOTTOM:-32767px!important
}
</style>
</head>

<body>
类别:${requestScope.category}<br>
标题:${requestScope.title}<br>

内容为:
<br/>
<divid="showContent">
${requestScope.content}
</div>
</body>
</html>

 
至此,运行项目,你就可以看见UEditor编辑器的强大功能。运行效果图:
 点击提交按钮后:
 注意事项:
(1)在index.jsp中  需要写: <LINKrel=stylesheet href="ueditor/themes/default/css/ueditor.css">     否则工具栏中的图标显示不出来。
(2)配置editor_config.js文件,由于这里我是把ueditor放到了UEditorCase目录下,因此配置为:URL = window.UEDITOR_HOME_URL||"/UEditorCase/ueditor/";
(3)按照上述步骤,不需要更改其他文件内容。
 
 
(二)编辑旧文章
editorUpdate.jsp代码:

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ‘editorUpdate.jsp‘ starting page</title>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<scripttype="text/javascript"src="ueditor/editor_config.js"></script>
<scripttype="text/javascript"src="ueditor/editor_all.js"></script>
<LINKrel=stylesheethref="ueditor/themes/default/css/ueditor.css">
</head>

<body>
编辑文章:<br/>

<scripttype="text/plain"id="myEditor"name="content">
${requestScope.content}
</script>
<scripttype="text/javascript">

var editor =new UE.ui.Editor();
editor.render("myEditor");

//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor(‘myEditor‘)
</script>
</body>
</html>

 
将struts.xml中

<resultname="success">/show.jsp</result>

注释掉,改为:

<resultname="success">/editorUpdate.jsp</result>

运行效果图:
 
(三)图片上传与附件上传
将jsp文件夹下的Uploader.java类拷贝到ueditor类包中
再将struts.xml改为:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<packagename="strus"extends="struts-default">


<actionname="publish"class="xiaoxiao.action.PublishAction">
<resultname="success">/show.jsp</result><!--

<result name="success">/editorUpdate.jsp</result>
--></action>

</package>


</struts>

 
      由于采用了struts框架,拦截器把(/*)所有请求的文件都做了处理,所以导致无法上传图片和附件。
解决方法,自定义拦截器,让它在请求imageUp.jsp和fileUp.jsp文件时不做处理。
步骤:
创建拦截器类:MyStrutsFilter.java

package xiaoxiao.filter;

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

publicclassMyStrutsFilterextendsStrutsPrepareAndExecuteFilter{
publicvoid doFilter(ServletRequest req,ServletResponse res,FilterChain chain)throwsIOException,ServletException{
HttpServletRequest request =(HttpServletRequest) req;
String url = request.getRequestURI();
if("/UEditorCase/ueditor/jsp/imageUp.jsp".equals(url)||"/UEditorCase/ueditor/jsp/fileUp.jsp".equals(url)){
//System.out.println("使用自定义的过滤器");
chain.doFilter(req, res);
}else{
//System.out.println("使用默认的过滤器");
super.doFilter(req, res, chain);
}
}
}

 
    配置拦截器:

<?xml version="1.0" encoding="UTF-8"?>
<web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>
<filter-name>struts2</filter-name>
<filter-class>xiaoxiao.filter.MyStrutsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

 
这样上传文件时,文件是保存在:/UeditorCase/ueditor/jsp/upload/      文件夹下。
注意事项:
(一)只需按上述步骤,不用修改imageUp.jsp和fileUp.jsp等文件。(可以根据需要修改文件保存路径和上传的文件类型)
 
运行效果图:
上传图片:
 
上传附件:
 成功后:
 
 至此,项目开发结束。

百度UEditor开发案例(JSP),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。