百度UEditor开发案例(JSP)
本案例的开发环境:MyEclipse+tomcat+jdk
- 用百度编辑器发布新闻(UEditor的初始化开发部署)
- 编辑已发过的新闻(UEditor的应用——编辑旧文章)
- 上传附件、图片等
由于百度编辑器强大的功能,web开发爱好者无不喜爱。但网上关于其开发的具体细节或整个项目的开发案例并不是很多,因此写下这篇简单开发百度编辑器UEditor的案例。
(一)UEditor的开发部署
<%@ 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;
}
}
<?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>
点击提交按钮后:
注意事项:
<%@ 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>
运行效果图:
<?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框架,拦截器把(/*)所有请求的文件都做了处理,所以导致无法上传图片和附件。
步骤:
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/ 文件夹下。
注意事项:
成功后:
至此,项目开发结束。
百度UEditor开发案例(JSP)的更多相关文章
- 基于jsp的百度Ueditor插件的使用
初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需 只是简单的应用,如有错误,请指正 首先去下载编辑器插件http://ueditor.baidu.com/website/downlo ...
- 百度UEditor编辑器使用教程与使用方法
我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源
个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配 ...
- 百度UEditor上传图片-再总结一次
晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就 ...
- 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案
此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...
- 百度UEditor组件出现Parameters: Invalid chunk '' ignored警告的分析
使用百度UEditor在线编辑器组件时,出现Parameters: Invalid chunk '' ignored的警告,之前的项目使用却没有.两个项目的环境应该是一样的. 没有时间去对照两项目使用 ...
- Android 百度地图开发之一(Hello BaiDu Map)
之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
随机推荐
- sql join 用法
SQL JOIN 的用法 关于sql语句中的连接(join)关键字,是较为常用而又不太容易理解的关键字,下面这个例子给出了一个简单的解释 --建表table1,table2:create tabl ...
- POJ 1836 Alignment 水DP
题目: http://poj.org/problem?id=1836 没读懂题,以为身高不能有相同的,没想到排中间的两个身高是可以相同的.. #include <stdio.h> #inc ...
- webserver<2>
#include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/wai ...
- BZOJ 1642: [Usaco2007 Nov]Milking Time 挤奶时间
Description 贝茜是一只非常努力工作的奶牛,她总是专注于提高自己的产量.为了产更多的奶,她预计好了接下来的N (1 ≤ N ≤ 1,000,000)个小时,标记为0..N-1. Farmer ...
- 一周一话题之四(JavaScript、Dom、jQuery全面复习总结<jQuery篇>)
-->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...
- Android MediaPlayer状态机
对播放音频/视频文件和流的控制是通过一个状态机来管理的.下图显示一个MediaPlayer对象被支持的播放控制操作驱动的生命周期和状态.椭圆代表MediaPlayer对象可能驻留的状态.弧线表示驱动M ...
- 用MATLAB画函数的曲线
用MATLAB画函数曲线 2013年8月11日 命令funtool 这是单变量函数分析的交互界面,比较方便,特别适用于y=f(x)型,即y与x分开的函数形式.见下图
- java学习多线程之生产者消费者
在java多线程当中还有一种关系需要我们来重点掌握,那就是生产者和消费者的关系.那么什么是生产者,什么是消费者呢?我们可以举个例子来说,有张三.李四负责生产烤鸭,王五.马六负责吃烤鸭,那么前者生产完烤 ...
- WordPress RokIntroScroller插件‘thumb.php’多个安全漏洞
漏洞名称: WordPress RokIntroScroller插件‘thumb.php’多个安全漏洞 CNNVD编号: CNNVD-201309-383 发布时间: 2013-09-24 更新时间: ...
- 多用pip,少用easy_install。
在此之前装python包,用过easy_install,也用过pip,但都是照猫画虎,在网上找命令完了装上就完事.现在稍微整理一下. easy_install: python开发有一个工具,setup ...