文本编辑器使用方法[J2EE]jsp项目中使用UEditor富文本编辑器

今天药忘吃喽~ 2022-05-28 12:19 503阅读 0赞

# 需求 #

*  新闻中心模块需要实现新闻浏览功能.
 *   管理员能在后台编辑新闻、发布新闻.
 *  能够实现图文混排.

# 解决方案 #

使用在线HTML编辑器实现傻瓜式编辑，编辑完成后存储html代码到数据库，动态读取数据库实现前台展示.HTML编辑器选用Ueditor [【官网】.][.]

# UEditor简介 #

*  Ueditor是百度前端团队研发富文本编辑器，可以像编辑word一样编辑html实现所见即所得的效果.
 *  基于MIT开源协议，功能强大，允许自由使用和修改。

# 安装配置 #

1.下载UEditor【1.4.3 JSP版本】.下载地址:[http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

解压之后的文件的目录是这样的：

![Center][]

2.Eclipse中新建动态web项目.

打开eclipse，file->NEW->Other->Web->Dynamic Web Project->next. Project name自定义,Dynamic web module version选择 2.5.Finish。

![Center 1][]

3.在WebContent目录下新建文件夹ueditor1\_4\_3,导入UEditor下载的ueditor配置文件到该文件下. ![Center 2][]  
  
 全选  
![Center 3][]  
  
4. 拷贝ueditor1\_4\_3/jsp/lib下的库文件到WEN-INF/lib文件夹下.   
 5. 添加项目到tomcat中并启动,浏览器中输入以下URL  
 http://localhost:8080/uetest/ueditor1\_4\_3/jsp/controller.jsp?action=config  
 工程目录和测试成功后的的内容如下  
![Center 4][]

6.单击WebContent/ueditor1\_4\_3/index.html，右键->Run As->Run On Server.可以看到完整版demo实例.

![Center 5][]

7.编辑一篇新闻:

![SouthEast][]

8.点击编辑框左上角的"HTML"图标，查看编辑内容的HTML源码

![SouthEast 1][]

9.点击"获得内容"按钮,js会输出编辑框内的html代码:

![SouthEast 2][]

说明编辑的内容会自动转换为HTML，而且HTML代码片段是可以输出的，那么如何获取编辑内容?

1.在WebContent目录下新建news.jsp.

2.打开index.jsp,找到下面这几行代码:

![SouthEast 3][]

3.增加表单,action="news.jsp"

![SouthEast 4][]

4.在index.jsp的编辑框中随便输入一串字符，提交.

![SouthEast 5][]

5.查看浏览器地址栏变化，可以看到编辑表单的name为editorValue

![SouthEast 6][]

6.将form表单传输数据方法改为post.删去暂时用不到的JS方法和button,在news.jsp中使用getParameter方法接收editorVaule值，并用jsp代码片段展示新闻编辑内容.

index.jsp

\[java\] [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <%@ page language="java" contentType="text/html; charset=utf-8"
2.   pageEncoding="utf-8"%> 
3.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
4.  "http://www.w3.org/TR/html4/loose.dtd"> 
5.  <html> 
6.  <head> 
7.   <title>完整demo</title> 
8.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
9.   <script type="text/javascript" charset="utf-8" src="ueditor1\_4\_3/ueditor.config.js"></script> 
10.  <script type="text/javascript" charset="utf-8" src="ueditor1\_4\_3/ueditor.all.min.js"> </script> 
11.   
12.   
13.  <script type="text/javascript" charset="utf-8" src="ueditor1\_4\_3/lang/zh-cn/zh-cn.js"></script> 
14. 
15.  <style type="text/css"> 
16.  div\{ 
17.  width:100%; 
18.  \} 
19.  </style> 
20. </head> 
21. <body> 
22. <div> 
23.  <form action="news.jsp" method="post" target="\_blank"> 
24.  <h1>完整demo</h1> 
25.  <script id="editor" type="text/plain" style="width:1024px;height:500px;"> 
26.  </script> 
27.  <input type="submit" value="编辑完成"> 
28. </form> 
29. 
30. </div> 
31. 
32. 
33. <script type="text/javascript"> 
34. 
35. //实例化编辑器
36. //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
37.  var ue = UE.getEditor('editor'); 
38. 
39. 
40.  function getContent() \{ 
41.  var arr = \[\]; 
42.  arr.push("使用editor.getContent()方法可以获得编辑器的内容"); 
43.  arr.push("内容为："); 
44.  arr.push(UE.getEditor('editor').getContent()); 
45.  alert(arr.join("\\n")); 
46.  \} 
47. 
48. </script> 
49. </body> 
50. </html>

news.jsp

\[java\] [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <%@ page language="java" contentType="text/html; charset=utf-8"
2.   pageEncoding="utf-8"%> 
3.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
4.  <html> 
5.  <head> 
6.  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
7.  <title>news</title> 
8.  <style type="text/css"> 
9.  .news \{ 
10.  width: 800px; 
11.  margin: 0 auto; 
12. \} 
13. </style> 
14. </head> 
15. <body> 
16.  <% 
17.  request.setCharacterEncoding("utf-8"); 
18.  String newsbody = request.getParameter("editorValue"); 
19.  %> 
20. 
21.  <div **class**="news"> 
22.  <%=newsbody%> 
23. 
24.  </div> 
25. </body> 
26. </html>

7.编辑新闻:

![SouthEast 7][]

8.点击编辑完成，转至news.jsp，效果如下.

![SouthEast 8][]

至此可见ueditor配置使用非常简单，对编辑内容进行处理只需要接收editorVaule值即可进行进行下一步处理.

# 配置图片上传路径 #

要实现图文混排需要对配置文件进行修改.

1.打开/uetest/WebContent/ueditor1\_4\_3/jsp/config.json,imageUrlPrefix值为"/工程名",注意要加上/.imagePathFormat路径要和工程目录配置一致.

![Center 6][]

2.打开ueditor.config.js,修改window.UEDITOR\_HOME\_URL为符合项目访问的路径。

![Center 7][]

3.config.json文件中有提交的图片图片表单名称设置, “ "imageFieldName": "upfile", /\* 提交的图片表单名称 \*/”,上传图片的表单属性中加入一行name="upfile",测试:

![Center 8][]

# Struts框架下图片上传配置 #

在struts框架下按照上面的配置图片上传仍然不成功，原因是配置struts时默认拦截器把所有请求都做了处理。

解决方法就是自定义拦截器,步骤

1 .创建拦截器类

\[java\] [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **package** com.test.filter; 
2.  
3.  **import** java.io.IOException; 
4.  
5.  **import** javax.servlet.FilterChain; 
6.  **import** javax.servlet.ServletException; 
7.  **import** javax.servlet.ServletRequest; 
8.  **import** javax.servlet.ServletResponse; 
9.  **import** javax.servlet.http.HttpServletRequest; 
10. 
11. **import** org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter; 
12. 
13. **public****class** MyStrutsFilter **extends** StrutsPrepareAndExecuteFilter\{ 
14. **public****void** doFilter(ServletRequest req, ServletResponse res,FilterChain chain) **throws** IOException, ServletException \{ 
15.  HttpServletRequest request = (HttpServletRequest) req; 
16. //不过滤的url 
17.  String url = request.getRequestURI(); 
18.  System.out.println(url); 
19. **if** ("/uetest/ueditor1\_4\_3/jsp/controller.jsp".equals(url)) \{ //注意路径
20.  System.out.println("使用自定义的过滤器"); 
21.  chain.doFilter(req, res); 
22.  \}**else**\{ 
23.  System.out.println("使用默认的过滤器"); 
24. **super**.doFilter(req, res, chain); 
25.  \} 
26.  \} 
27. \}

2 .修改web.xml，把默认拦截器修改为自定义拦截器

\[java\] [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <filter> 
2.   <filter-name>struts2</filter-name> 
3.   <filter-**class**>com.test.filter.MyStrutsFilter</filter-**class**> 
4.   </filter> 
5.  
6.   <filter-mapping> 
7.   <filter-name>struts2</filter-name> 
8.   <url-pattern>/\*</url-pattern> 
9.   </filter-mapping>

# 总结 #

*  UE功能强大,配置比较简单
 *  图片上传要注意配置文件中的路径，最终上传到服务器的图片文件默认是以时间戳命名文件夹保存图片的.
 *  在struts中配置UE需要自定义拦截器

程序下载地址:

[http://download.csdn.net/detail/napoay/8998779][http_download.csdn.net_detail_napoay_8998779]

[.]: http://ueditor.baidu.com/website/index.html
[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[Center]: /images/20220528/3701f23c9c414dfaafbc15ccc9c0bf76.png
[Center 1]: /images/20220528/df718f01675b412fb43fb9327b49bac6.png
[Center 2]: /images/20220528/b05938513a8d409796fb297c1be78116.png
[Center 3]: /images/20220528/96e3448d152b4403ada416281629b45f.png
[Center 4]: /images/20220528/dab0aa1f65a84387afbeeba56dd8e609.png
[Center 5]: /images/20220528/391b2820e67a419c84d427c3e810aeb8.png
[SouthEast]: /images/20220528/94d2138cb0624b37af35bbc8d5a3eb29.png
[SouthEast 1]: /images/20220528/05cd8a0d4bb34c4f98eeb1ab804c881c.png
[SouthEast 2]: /images/20220528/dee143f1aef147dfb2773606ffffb7e7.png
[SouthEast 3]: /images/20220528/6629b0f4879542d19b46c59c1552380d.png
[SouthEast 4]: /images/20220528/011cea823e2546d6b73bc4ddac8afa16.png
[SouthEast 5]: /images/20220528/2cd11b7e1fa34164a8e690f727f0ad71.png
[SouthEast 6]: /images/20220528/237b58dd622f451b8f4e2749843b0594.png
[view plain]: http://blog.csdn.net/napoay/article/details/47414851#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1561975
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1561975/fork
[SouthEast 7]: /images/20220528/95643c0ab62c42b3b2d2fbc0c8485644.png
[SouthEast 8]: /images/20220528/0c4b592c38384cd2bbc9ebfd8cc173f9.png
[Center 6]: /images/20220528/f8313faa6a3a4001894c95af506826b8.png
[Center 7]: /images/20220528/7d23bf7bcb02463ea8fae2a809f7e8f3.png
[Center 8]: /images/20220528/49e0e2f323754ad4b8c8078699d2b808.png
[http_download.csdn.net_detail_napoay_8998779]: http://download.csdn.net/detail/napoay/8998779