本案例的开发环境：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等文件。（可以根据需要修改文件保存路径和上传的文件类型）
运行效果图：
上传图片：
上传附件：

成功后：

至此，项目开发结束。

转载于:https://www.cnblogs.com/zhwl/p/3582773.html

百度UEditor开发案例（JSP）相关推荐

  1. 编辑器开发（一）：准备工作，百度ueditor移入项目当中

    ueditor富文本编辑器 Ueditor 富文本编辑器 由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点. 下载百度ueditor 详细介绍 官方git仓 ...

  2. 《Bootstrap+JSP开发案例》学习

    <Bootstrap+JSP开发案例>学习 本次学习到的主要内容 前台登录页面 JS 表单验证 PrepareStatement 接口 密码MD5加"盐"加密 前言 最 ...

  3. jsp项目开发案例_Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)life...

    1 开发需要环境 工欲善其事,必先利其器.在正式开发之前我们检查好需要安装的拓展,不要开发中发现这些问题,打断思路影响我们的开发效率. 安装 swoole 拓展包 安装 redis 拓展包 安装 la ...

  4. jsp项目开发案例_Laravel中使用swoole项目实战开发案例一 (建立swoole和前端通信)

    Laravel中使用swoole项目实战开发案例二(后端主动分场景给界面推送消息) 工欲善其事,必先利其器.在正式开发之前我们检查好需要安装的拓展,不要开发中发现这些问题,打断思路影响我们的开发效率. ...

  5. [转]百度UEditor编辑器(php)

    百度UEditor编辑器!合入PHP网站! 一.富文本内容交互 1.编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示.问候等内容. 在editor_config.js文件 ...

  6. 百度UEditor编辑器,合入PHP网站

    本文转自:http://www.cnblogs.com/losen/archive/2013/05/23/3094612.html 百度UEditor编辑器!合入PHP网站! Posted on 20 ...

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

    第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...

  8. PHP百度编辑器使用方法,百度UEditor编辑器使用教程与使用方法

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

  9. SpringBoot开发案例之整合Dubbo提供者(一)

    既然是开发案例,显然不会扯那么多老婆舌,有不清楚这两个东东的请自行百度. 开发环境 JDK1.7.Maven.Eclipse.SpringBoot1.5.1.Dubbo2.8.4 项目结构 相关配置 ...

最新文章

  1. mac android 真机调试
  2. 安装EBS前期检查工具 - RDA - Health Check / Validation Engine Guide
  3. java弹出网页alter_JavaScript三种弹出框（alert，confirm和prompt）用法举例
  4. 逻辑分析推理（五小姐问题）
  5. 为什么不敢和别人竞争_看懂这个自我评价发展曲线，你就明白，为什么青春期孩子如此叛逆...
  6. SAP CRM WebClient UI session restart
  7. 基于Dapper的开源Lambda扩展,且支持分库分表自动生成实体
  8. usb hid 调试软件_开源USB免驱固件升级软件分享
  9. 力扣762.二进制表示中质数个计算置位
  10. mysql开源内库_MySQL数据库（查询语句）
  11. Linux登录的shell信息,Linux展示登录Shell信息
  12. conda环境下更新pip失败
  13. Java常用框架介绍
  14. MySQL复制一张表数据到另一张新表
  15. 编译项目时报出已经定义了构造器
  16. 编程之类的文案_精选50句文案,个个都是让你灵感喷涌的句子!
  17. 北京五险一金介绍及公积金领取办法
  18. 关于职业选择讲座的笔记
  19. 线上推广渠道有哪些？如何进行管理？
  20. C# e.Handled的用法，控制文本框键盘输入

热门文章

  1. 你不应该关注区块链的“杀手级应用”
  2. 密码学是如何保护区块链的
  3. 使用docker-compose进行多节点部署
  4. 使用FortJs使用现代JavaScript开发Node.js
  5. (C++)用upper_bound函数取代自己写的二分查找
  6. Python培训班适合哪些人报名学习
  7. Java培训学习步骤有哪些
  8. 个人怎么发表期刊具体细节
  9. ELASTIC SEARCH 性能调优
  10. pkg mysql 在macOS 上的管理