用百度编辑器发布新闻（UEditor的初始化开发部署）

来源：互联网发布：iphone pro画笔软件编辑：程序博客网时间：2024/06/10 15:29

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

本案例的开发内容：

用百度编辑器发布新闻（UEditor的初始化开发部署）
编辑已发过的新闻（UEditor的应用——编辑旧文章）
上传附件、图片等

由于百度编辑器强大的功能，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>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->  <script type="text/javascript" src="ueditor/editor_config.js"></script>  <script type="text/javascript" src="ueditor/editor_all.js"></script>  <LINKrel=stylesheet href="ueditor/themes/default/css/ueditor.css">  </head>    <body>  <form action="publish.action" method="post">   类别： <input type="text" name="category" /><br/>    标题：<input type="text" name="title" /><br/>       <textarea name="content" id="myEditor">这里写你的初始化内容</textarea><script type="text/javascript">    var editor = new UE.ui.Editor();    editor.render("myEditor");    //1.2.4以后可以使用一下代码实例化编辑器    //UE.getEditor('myEditor')</script><input type="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;public class PublishAction extends ActionSupport {private String category;private String title;private String content;public String getCategory() {return category;}public void setCategory(String category) {this.category = category;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}@Overridepublic String execute() throws Exception {//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>        <package name="strus" extends="struts-default" >                        <action name="publish" class="xiaoxiao.action.PublishAction">                 <result name="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><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="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 /><div id="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>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->    <script type="text/javascript" src="ueditor/editor_config.js"></script>  <script type="text/javascript" src="ueditor/editor_all.js"></script>  <LINKrel=stylesheet href="ueditor/themes/default/css/ueditor.css">  </head>    <body>  编辑文章：<br/>   <script type="text/plain" id="myEditor" name="content">          ${requestScope.content}   </script><script type="text/javascript">    var editor = new UE.ui.Editor();    editor.render("myEditor");        //1.2.4以后可以使用一下代码实例化编辑器    //UE.getEditor('myEditor')</script>  </body></html>

将struts.xml中

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

注释掉，改为：

<result name="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>        <package name="strus" extends="struts-default" >                        <action name="publish" class="xiaoxiao.action.PublishAction">                 <result name="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;public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter {public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {        HttpServletRequest request = (HttpServletRequest) req;    String url = request.getRequestURI(); String[] strs=url.split("/");//以/为分界拆分strs if(strs.length>3){  if("ueditor".equals(strs[2])&&"jsp".equals(strs[3])){   //System.out.println(strs[0]); 无   //System.out.println(strs[1]);UEditorCase   //System.out.println(strs[2]);ueditor   //System.out.println(strs[3]);jsp   //System.out.println(strs[4]);//upload   //System.out.println("自定义拦截");   chain.doFilter(req, res);//链式结构，当我定义的过滤器后不做操作就转到下一个过滤器，这里是我自己的过滤器，做了存图片的操作     }else{   //System.out.println("defaul");   super.doFilter(req, res, chain);//默认拦截器  } }else{  //System.out.println("defaul");  super.doFilter(req,res,chain); }  }}

配置拦截器：

<?xml version="1.0" encoding="UTF-8"?><web-app version="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等文件。（可以根据需要修改文件保存路径和上传的文件类型）

运行效果图：

上传图片：

上传附件：

成功后：

至此，项目开发结束。

0 0