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

最新推荐文章于 2023-10-08 22:36:33 发布

chengchen404

最新推荐文章于 2023-10-08 22:36:33 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/Fupengyao/article/details/50279917

版权

本案例的开发环境：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;
	}
	
	@Override
	public 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等文件。（可以根据需要修改文件保存路径和上传的文件类型）

运行效果图：

上传图片：

上传附件：

成功后：

至此，项目开发结束。

chengchen404

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用百度编辑器发布新闻（UEditor的初始化开发部署）

本案例的开发环境：MyEclipse+tomcat+jdk 本案例的开发内容：用百度编辑器发布新闻（UEditor的初始化开发部署）编辑已发过的新闻（UEditor的应用——编辑旧文章）上传附件、图片等由于百度编辑器强大的功能，web开发爱好者无不喜爱。但网上关于其开发的具体细节或整个项目的开发案例并不是很多，因此写下这篇简单开发百度编辑器UEditor
复制链接

扫一扫