本案例的开发环境：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）的更多相关文章

  1. 基于jsp的百度Ueditor插件的使用

    初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需 只是简单的应用,如有错误,请指正 首先去下载编辑器插件http://ueditor.baidu.com/website/downlo ...

  2. 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  3. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  4. 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

    个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配 ...

  5. 百度UEditor上传图片-再总结一次

    晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就 ...

  6. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  7. 百度UEditor组件出现Parameters: Invalid chunk &#39;&#39; ignored警告的分析

    使用百度UEditor在线编辑器组件时,出现Parameters: Invalid chunk '' ignored的警告,之前的项目使用却没有.两个项目的环境应该是一样的. 没有时间去对照两项目使用 ...

  8. Android 百度地图开发之一（Hello BaiDu Map）

    之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...

  9. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

随机推荐

  1. 可视化查看MongoDB - MongoVUE

    OS:Window 7 1.下载安装MongoVUE:http://www.mongovue.com/downloads/ 2.运行MongoVUE,点击“OK”按钮,使用免费版 3.选择一个已经存在 ...

  2. 关于MATLAB中的tic toc的问题

    关于MATLAB中的tic toc的问题 其一) MATLAB实际单位时间计时函数的具体应用,在编写程序时,经常需要获知代码的执行实际时间,这就需要在程序中用到计时函数,matlab中提供了以下三种方 ...

  3. 【技术贴】webservice 调用 Transport error : 401 Error:Una

    解决 webservice 调用之后报错:调用异常:Transport error : 401 Error:Unauthorized 授权失败. 加入如下代码 //Sap需要ws-security的认 ...

  4. QLGame 2d Engine 搭建2d游戏原理

    大家好,2d引擎基于opengl(es) 3d技术,是因为这样比之前的ddraw有很多好处! 1.坐标采用浮点数,可以进行曲线移动 2.如果在ddraw的对图片进行缩放和旋转的时候,是基于点像素的操作 ...

  5. 【网络流24题】No. 13 星际转移问题 （网络判定 最大流）

    [题意] 由于人类对自然资源的消耗, 人们意识到大约在 2300 年之后, 地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民. 令人意想不到的是, 2177 年冬由于未知的原因, 地球 ...

  6. 【UVA 10369】 Arctic Network （最小生成树）

    [题意] 南极有n个科研站, 要把这些站用卫星或者无线电连接起来,使得任意两个都能直接或者间接相连.任意两个都有安装卫星设备的,都可以直接通过卫星通信,不管它们距离有多远. 而安装有无线电设备的两个站 ...

  7. ScrollView中嵌套两个ListView

    做的项目中要使用两个ListView在同一个页面上下显示,因为数据源不同,不能通过在Adapter中设置标志位去区分显示,最后只能硬着头皮做一个ScrollView嵌套两个ListView,但按正常情 ...

  8. 转：Java图形化界面设计——布局管理器之FlowLayout（流式布局）其他请参考转载出处网址

    http://blog.csdn.net/liujun13579/article/details/7771191 前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以 ...

  9. 人一生必看的100部电影(全球最佳电影排名榜TOP250)

    人一生必看的100部电影(全球最佳电影排名榜TOP250) 人的一生能看多少部电影?假设我们每周都看一部,从10岁看到80岁将会看3640部.但是我们也不可能喜欢这全部的电影.大多数的可能,我们会根据 ...

  10. Web安全测试之XSS（转）

    XSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的 ...