碼上歡樂
相關內容    簡體    繁體

百度UEditor開發案例（JSP）

本文轉載自   查看原文   2014-03-05 16:35   30445    前台javascript

本案例的開發環境：MyEclipse+tomcat+jdk

    本案例的開發內容：
  1. 用百度編輯器發布新聞（UEditor的初始化開發部署）
  2. 編輯已發過的新聞（UEditor的應用——編輯舊文章）
  3. 上傳附件、圖片等
     由於百度編輯器強大的功能，web開發愛好者無不喜愛。但網上關於其開發的具體細節或整個項目的開發案例並不是很多，因此寫下這篇簡單開發百度編輯器UEditor的案例。
     此案例只是簡單的應用Ueditor，僅供參考。

 

    
    項目名稱：UEditorCase
    項目組織結構圖：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者

   (一)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編輯器的強大功能。運行效果圖：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 點擊提交按鈕后：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 注意事項：
（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>

運行效果圖：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 
（三）圖片上傳與附件上傳
將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） - 線上的思考者 - 線上的思考者
 
上傳附件：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 成功后：
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 
百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者
 至此，項目開發結束。 百度UEditor開發案例（JSP） - 線上的思考者 - 線上的思考者


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 百度ueditor改造 百度UEditor基本使用 百度UEditor的config.json 百度Ueditor配置問題 百度富文本Ueditor總結 百度UEditor -- ZeroClipboard is not defined 百度編輯器（UEditor）開發系列——調用上傳圖片、上傳文件等模塊 百度富文本編輯器ueditor/jsp版的簡單使用，可上傳圖片和附件 百度富文本編輯器ueditor在jsp中的使用（ssm框架中的應用） java開發：分享一下百度ueditor和七牛的圖片集成上傳
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM