百度富文本编辑器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:

 <?xml version="1.0" encoding="UTF-8"?>

 <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">

   <display-name>lightnote</display-name>

   <filter>

     <filter-name>encodingFilter</filter-name>

     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

     <init-param>

       <param-name>encoding</param-name>

       <param-value>UTF-8</param-value>

     </init-param>

   </filter>

   <filter-mapping>

     <filter-name>encodingFilter</filter-name>

     <url-pattern>/*</url-pattern>

   </filter-mapping>

   <listener>

     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

   </listener>

   <listener>

     <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>

   </listener>

   <context-param>

     <param-name>contextConfigLocation</param-name>

     <param-value>classpath:/spring-mybatis/spring-mybatis.xml</param-value>

   </context-param>

//此处经过修改

   <servlet>

     <servlet-name>springmvc</servlet-name>

     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

     <init-param>

       <param-name>contextConfigLocation</param-name>

       <param-value>classpath:/springmvc-servlet/springmvc-servlet.xml</param-value>

     </init-param>

     <load-on-startup>1</load-on-startup>

   </servlet>

   <servlet-mapping>

     <servlet-name>springmvc</servlet-name>

     <url-pattern>/</url-pattern>

   </servlet-mapping>

   <context-param>

     <param-name>log4jConfigLocation</param-name>

     <param-value>classpath:/properties/log4j.properties</param-value>

   </context-param>

   <listener>

     <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>

   </listener>

   <welcome-file-list>

      <welcome-file>index.jsp</welcome-file>

     <welcome-file>login.jsp</welcome-file>

      <welcome-file>ueditor.jsp</welcome-file>

   </welcome-file-list>

   <context-param>

     <param-name>webAppRoot</param-name>

     <param-value>lightnote.root</param-value>

   </context-param>

 </web-app>

所有资源都会被dispatcherserlvet拦截。

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

spring-servlet.xml:

 <?xml version="1.0" encoding="UTF-8"?>

 <beans xmlns="http://www.springframework.org/schema/beans"

     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

     xmlns:context="http://www.springframework.org/schema/context"

     xmlns:mvc="http://www.springframework.org/schema/mvc"

     xsi:schemaLocation="http://www.springframework.org/schema/beans

                         http://www.springframework.org/schema/beans/spring-beans.xsd

                            http://www.springframework.org/schema/context

                            http://www.springframework.org/schema/context/spring-context.xsd

                         http://www.springframework.org/schema/mvc

                         http://www.springframework.org/schema/mvc/spring-mvc.xsd">

     <!-- 启用srping mvc注解 -->

     <!-- <mvc:annotation-driven />开启设置可以替代 -->

     <!-- <bean id="handlerMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>

     <bean id="handlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/> -->

     <mvc:annotation-driven/>

     <!-- 静态资源 -->

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

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

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

     <!-- 拦截器 -->

     <!-- <mvc:interceptors></mvc:interceptors> -->

     <!-- 自动扫描的包，使Spring支持自动检测组件，如注解的Controller -->

     <context:component-scan base-package="com.ruanku.lightnote"/>

     <!--视图解析器： 定义视图的前缀后缀 -->

     <bean id="resourceView" class="org.springframework.web.servlet.view.InternalResourceViewResolver">

         <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>

         <property name="prefix" value="/WEB-INF/jsp/"/>

         <property name="suffix" value=".jsp"/>

     </bean>

 </beans>

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

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

于是我做了以下修改：

 <?xml version="1.0" encoding="UTF-8"?>

 <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">

   <display-name>lightnote</display-name>

   <filter>

     <filter-name>encodingFilter</filter-name>

     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

     <init-param>

       <param-name>encoding</param-name>

       <param-value>UTF-8</param-value>

     </init-param>

   </filter>

   <filter-mapping>

     <filter-name>encodingFilter</filter-name>

     <url-pattern>/*</url-pattern>

   </filter-mapping>

   <listener>

     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

   </listener>

   <listener>

     <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>

   </listener>

   <context-param>

     <param-name>contextConfigLocation</param-name>

     <param-value>classpath:/spring-mybatis/spring-mybatis.xml</param-value>

   </context-param>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.css</url-pattern>

 </servlet-mapping>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.gif</url-pattern>

 </servlet-mapping>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.jpg</url-pattern>

 </servlet-mapping>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.png</url-pattern>

 </servlet-mapping>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.js</url-pattern>

 </servlet-mapping>

 <servlet-mapping>

     <servlet-name>default</servlet-name>

     <url-pattern>*.html</url-pattern>

 </servlet-mapping>  

   <servlet>

     <servlet-name>springmvc</servlet-name>

     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

     <init-param>

       <param-name>contextConfigLocation</param-name>

       <param-value>classpath:/springmvc-servlet/springmvc-servlet.xml</param-value>

     </init-param>

     <load-on-startup>1</load-on-startup>

   </servlet>

   <servlet-mapping>

     <servlet-name>springmvc</servlet-name>

     <url-pattern>/</url-pattern>

   </servlet-mapping>

   <context-param>

     <param-name>log4jConfigLocation</param-name>

     <param-value>classpath:/properties/log4j.properties</param-value>

   </context-param>

   <listener>

     <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>

   </listener>

   <welcome-file-list>

      <welcome-file>index.jsp</welcome-file>

     <welcome-file>login.jsp</welcome-file>

      <welcome-file>ueditor.jsp</welcome-file>

   </welcome-file-list>

   <context-param>

     <param-name>webAppRoot</param-name>

     <param-value>lightnote.root</param-value>

   </context-param>

 </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」等关键字可以获取对应的免费学习资料。

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

thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示一.总结一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示官方完整demo 官方完整demo对应的源代码 &l ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

随机推荐

java丢手帕约瑟夫问题
一.问题描述: n个人围成一个圈,编号为1~n,从第一号开始报数,报到3的倍数的人离开,一直数下去,直到最后只有一个人,求此人编号. 二.问题提示: 使用一维数组,数组元素初始为1,从1开始 ...
用于辅助在 bootstrap-dialog 中的表现：app-jquery-dialog.js
// 用于通某个元素共享配置数据 $.extend($.fn, { formOption : function(showOpt) { var opt = $.data(this[0], "f ...
HTML 5终于定稿，八年后我们再一次谈谈怎么改变世界
我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容 Flash,在 Adobe 统治多媒体开发的那个年代,这需要付出极大的勇气.这么多年过去了,虽然所有人都在谈论 HT ...
LPC1768基本输入输出GPIO使用
LPC1788通用IO口的控制包含了一些基本的组件,比如设置推挽输出,开漏输出,上拉电阻等,我们今天来看看. 首先使用GPIO要打开GPIO的系统时钟 LPC_SC->PCONP |= (1 ...
CABasicAnimation 基本动画分类： ios技术 2015-07-16 17:10 132人阅读评论(0) 收藏
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
充电-ios（未完更新中...
[reference]http://www.cocoachina.com/ios/20160323/15770.html OC的理解与特性 OC作为一门面向对象的语言,自然具有面向对象的语言特性:封装 ...
微软企业库DBBA的研究
Summary:如何入门使用Data Access Application Block,可以参考Enterprise Library 3.1中文帮助:数据访问应用程序块.这篇文章侧重在DAAB工作原理 ...
【python之路11】集合数据类型（set）
集合数据类型(set):集合是不重复的无需序列 1.集合数据类型的创建 a = {11,22,33} #或 a = set() #创建空集合,不能用a={},这样创建的是字典类型 2.集合转换(将可迭 ...
DOMContentLoaded
setTimeout(function(){ alert("settimeout"); },0); EventUtil.addHandler(window, "DOMCo ...
[oracle]Oracle角色管理
假如我们直接给每一个用户赋予权限,这将是一个巨大又麻烦的工作,同时也不方便DBA进行管理.通过采用角色,使得: 权限管理更方便.将角色赋予多个用户,实现不同用户相同的授权.如果要修改这些用户的权限,只 ...

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

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

随机推荐

热门专题