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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fupengyao/article/details/50279917

本案例的开发环境: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> <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编辑器的强大功能。运行效果图:
百度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> <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>

运行效果图:
百度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> <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等文件。(可以根据需要修改文件保存路径和上传的文件类型)

运行效果图:
上传图片:
百度UEditor开发案例(JSP) - 线上的思考者 - 线上的思考者
 
上传附件:
百度UEditor开发案例(JSP) - 线上的思考者 - 线上的思考者
 成功后:
百度UEditor开发案例(JSP) - 线上的思考者 - 线上的思考者
 
百度UEditor开发案例(JSP) - 线上的思考者 - 线上的思考者
 至此,项目开发结束。

没有更多推荐了,返回首页