百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

项目地址：https://github.com/724888/lightnote_new

首先我参考了一个ueditor的demo。

下载地址：http://download.csdn.net/download/lookthatgirl/5651763

demo的项目结构

导入工程后配置一下build path将jar配置好即可运行，当然可能存在error，解决即可。

但是要将这个编辑器加入到我自己的页面中时遇到了点麻烦。

首先问题一：

maven配置；

其中一些jar包有maven仓库地址，而另外一些并没有。

io，json，upload这些可以直接搜到，不过ueditor就没有了，

这里贴上所有的dependency地址。

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20140107</version>
    </dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3</version>
</dependency>
      <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.2</version>
      </dependency>
      <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.9</version>
</dependency>

其中ueditor是mavenrepository里提供的地址。

如果不愿意配置pom.xml，也可以直接把jar包加入到build path，一样可以运行。

其次问题二：

官方提供的工程存在bug，主要有几个问题，

1是json文件中有注释，可用正则表达式的替换来删除注释

2是show.html文件中的error，原因是&符号不能被识别，需要改成&即可解决。

3是jar包缺失导致的一些import错误，将jar包配置好应该可以解决。

问题三：

jsp文件中已配置好文字编辑器，但是无法成功显示。几经测试，与jar包无关。

后终于找到其原因，资源文件没有读取到。

这是我的工程结构

ueditor.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<%
    String apath = request.getContextPath();
    String abasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+apath+"/";
    out.print(abasePath+"dassa");
    
    
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'index.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">
    <SCRIPT type=text/javascript src="<%=abasePath%>ueditor/ueditor.config.js"></SCRIPT>  
    <SCRIPT type=text/javascript src="<%=abasePath%>ueditor/ueditor.all.js"></SCRIPT>
  </head>
  
  <body>
      <form action="save.jsp" method="post">
        <TEXTAREA id=myEditor name="mycontent"></TEXTAREA>  
        <SCRIPT type=text/javascript>  
            var editor = new UE.ui.Editor();  
            editor.render("myEditor");  
            //1.2.4以后可以使用一下代码实例化编辑器 
            //UE.getEditor('myEditor') 
        </SCRIPT>
        <input name="submit" value="提交" type="submit">
    </form>
  </body>
</html>

仔细检查了几次，发现js目录也没有写错，但是就是显示不出编辑器。

而jsp中只包含了js文件，只可能是js出现问题，于是我开始寻找资源文件配置的问题。

由于我使用的是ssm框架，以下是我的相关配置文件：

web.xml:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app 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_3_0.xsd" version="3.0">
 3   <display-name>lightnote</display-name>
 4   <filter>
 5     <filter-name>encodingFilter</filter-name>
 6     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 7     <init-param>
 8       <param-name>encoding</param-name>
 9       <param-value>UTF-8</param-value>
10     </init-param>
11   </filter>
12   <filter-mapping>
13     <filter-name>encodingFilter</filter-name>
14     <url-pattern>/*</url-pattern>
15   </filter-mapping>
16   <listener>
17     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
18   </listener>
19   <listener>
20     <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
21   </listener>
22   <context-param>
23     <param-name>contextConfigLocation</param-name>
24     <param-value>classpath:/spring-mybatis/spring-mybatis.xml</param-value>
25   </context-param>
26   
27   
//此处经过修改

54 
55 
56   <servlet>
57     <servlet-name>springmvc</servlet-name>
58     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
59     <init-param>
60       <param-name>contextConfigLocation</param-name>
61       <param-value>classpath:/springmvc-servlet/springmvc-servlet.xml</param-value>
62     </init-param>
63     <load-on-startup>1</load-on-startup>
64   </servlet>
65   <servlet-mapping>
66     <servlet-name>springmvc</servlet-name>
67     <url-pattern>/</url-pattern>
68   </servlet-mapping>
69 
70   
71    
72     
73   <context-param>
74     <param-name>log4jConfigLocation</param-name>
75     <param-value>classpath:/properties/log4j.properties</param-value>
76   </context-param>
77   <listener>
78     <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
79   </listener>
80   <welcome-file-list>
81      <welcome-file>index.jsp</welcome-file>
82     <welcome-file>login.jsp</welcome-file>
83      <welcome-file>ueditor.jsp</welcome-file>
84   
85     
86   </welcome-file-list>
87   <context-param>
88     <param-name>webAppRoot</param-name>
89     <param-value>lightnote.root</param-value>
90   </context-param>
91 </web-app>

所有资源都会被dispatcherserlvet拦截。

并且在spring配置文件中会对静态资源文件进行处理。

spring-servlet.xml:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 4     xmlns:context="http://www.springframework.org/schema/context"
 5     xmlns:mvc="http://www.springframework.org/schema/mvc"
 6     xsi:schemaLocation="http://www.springframework.org/schema/beans 
 7                         http://www.springframework.org/schema/beans/spring-beans.xsd  
 8                            http://www.springframework.org/schema/context 
 9                            http://www.springframework.org/schema/context/spring-context.xsd  
10                         http://www.springframework.org/schema/mvc 
11                         http://www.springframework.org/schema/mvc/spring-mvc.xsd">
12     <!-- 启用srping mvc注解 -->
13     <!-- <mvc:annotation-driven />开启设置可以替代 -->
14     <!-- <bean id="handlerMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/> 
15     <bean id="handlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/> -->
16     <mvc:annotation-driven/>
17     <!-- 静态资源 -->
18     <mvc:resources mapping="/images/**" location="/images/"/>  
19 <mvc:resources mapping="/js/**" location="/js/" />  
20 <mvc:resources mapping="/css/**" location="/css/" /> 
21     <!-- 拦截器 -->
22     <!-- <mvc:interceptors></mvc:interceptors> -->
23     <!-- 自动扫描的包，使Spring支持自动检测组件，如注解的Controller -->
24     <context:component-scan base-package="com.ruanku.lightnote"/>
25     
26     <!--视图解析器： 定义视图的前缀后缀 -->
27     <bean id="resourceView" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
28         <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
29         <property name="prefix" value="/WEB-INF/jsp/"/>
30         <property name="suffix" value=".jsp"/>
31     </bean>
32     
33     
34 </beans>

但是由于spring配置文件只对固定的三个资源文件夹进行扫描。无法扫描到其他的文件夹。

所以jsp页面才加载不到ueditor文件夹里的静态资源。

于是我做了以下修改：

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app 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_3_0.xsd" version="3.0">
 3   <display-name>lightnote</display-name>
 4   <filter>
 5     <filter-name>encodingFilter</filter-name>
 6     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 7     <init-param>
 8       <param-name>encoding</param-name>
 9       <param-value>UTF-8</param-value>
10     </init-param>
11   </filter>
12   <filter-mapping>
13     <filter-name>encodingFilter</filter-name>
14     <url-pattern>/*</url-pattern>
15   </filter-mapping>
16   <listener>
17     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
18   </listener>
19   <listener>
20     <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
21   </listener>
22   <context-param>
23     <param-name>contextConfigLocation</param-name>
24     <param-value>classpath:/spring-mybatis/spring-mybatis.xml</param-value>
25   </context-param>
26   
27   
28 <servlet-mapping>
29     <servlet-name>default</servlet-name>
30     <url-pattern>*.css</url-pattern>
31 </servlet-mapping>
32 <servlet-mapping>
33     <servlet-name>default</servlet-name>
34     <url-pattern>*.gif</url-pattern>
35 </servlet-mapping>
36 <servlet-mapping>
37     <servlet-name>default</servlet-name>
38     <url-pattern>*.jpg</url-pattern>
39 </servlet-mapping>
40 <servlet-mapping>
41     <servlet-name>default</servlet-name>
42     <url-pattern>*.png</url-pattern>
43 </servlet-mapping>
44 <servlet-mapping>
45     <servlet-name>default</servlet-name>
46     <url-pattern>*.js</url-pattern>
47 </servlet-mapping>
48 
49 
50 <servlet-mapping>  
51     <servlet-name>default</servlet-name>  
52     <url-pattern>*.html</url-pattern>  
53 </servlet-mapping>  
54 
55 
56   <servlet>
57     <servlet-name>springmvc</servlet-name>
58     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
59     <init-param>
60       <param-name>contextConfigLocation</param-name>
61       <param-value>classpath:/springmvc-servlet/springmvc-servlet.xml</param-value>
62     </init-param>
63     <load-on-startup>1</load-on-startup>
64   </servlet>
65   <servlet-mapping>
66     <servlet-name>springmvc</servlet-name>
67     <url-pattern>/</url-pattern>
68   </servlet-mapping>
69 
70   
71    
72     
73   <context-param>
74     <param-name>log4jConfigLocation</param-name>
75     <param-value>classpath:/properties/log4j.properties</param-value>
76   </context-param>
77   <listener>
78     <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
79   </listener>
80   <welcome-file-list>
81      <welcome-file>index.jsp</welcome-file>
82     <welcome-file>login.jsp</welcome-file>
83      <welcome-file>ueditor.jsp</welcome-file>
84   
85     
86   </welcome-file-list>
87   <context-param>
88     <param-name>webAppRoot</param-name>
89     <param-value>lightnote.root</param-value>
90   </context-param>
91 </web-app>

增加

28 <servlet-mapping>
29     <servlet-name>default</servlet-name>
30     <url-pattern>*.css</url-pattern>
31 </servlet-mapping>
32 <servlet-mapping>
33     <servlet-name>default</servlet-name>
34     <url-pattern>*.gif</url-pattern>
35 </servlet-mapping>
36 <servlet-mapping>
37     <servlet-name>default</servlet-name>
38     <url-pattern>*.jpg</url-pattern>
39 </servlet-mapping>
40 <servlet-mapping>
41     <servlet-name>default</servlet-name>
42     <url-pattern>*.png</url-pattern>
43 </servlet-mapping>
44 <servlet-mapping>
45     <servlet-name>default</servlet-name>
46     <url-pattern>*.js</url-pattern>
47 </servlet-mapping>

在dispatcherservlet截获请求之前会让defaultservlet对静态资源进行处理。

并把spring-servlet.xml中的静态资源配置代码删除。

<mvc:resources mapping="/images/**" location="/images/"/>
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />

这样即可以让jsp页面访问到其他文件夹的静态资源了。

于是百度富文本编辑器就可以使用了！

微信公众号【黄小斜】大厂程序员，互联网行业新知，终身学习践行者。关注后回复「Java」、「Python」、「C++」、「大数据」、「机器学习」、「算法」、「AI」、「Android」、「前端」、「iOS」、「考研」、「BAT」、「校招」、「笔试」、「面试」、「面经」、「计算机基础」、「LeetCode」等关键字可以获取对应的免费学习资料。

posted @ 2017-02-09 20:08 程序员黄小斜阅读(7814) 评论(0) 编辑收藏举报

刷新页面返回顶部

Java技术江湖

公众号【Java技术江湖】前阿里Java工程师，4年码龄。专注分享Java技术干货文，偶尔也吹水吐槽聊人生。关注后回复“Java技术江湖”即可获取我原创的10w+字《Java工程师面试指南》

百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

公告

Java技术江湖

公众号【Java技术江湖】 前阿里Java工程师，4年码龄。 专注分享Java技术干货文，偶尔也吹水吐槽聊人生。关注后回复“Java技术江湖”即可获取我原创的10w+字《Java工程师面试指南》

百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

公告

公众号【Java技术江湖】前阿里Java工程师，4年码龄。专注分享Java技术干货文，偶尔也吹水吐槽聊人生。关注后回复“Java技术江湖”即可获取我原创的10w+字《Java工程师面试指南》