uditor配置问题集结 jsp版

近期做了一个uditor的插件,相对来说符合了客户的需求,比较灵活.集结了好多网上的内容,期间也攻克了未找到上传数据 和 图片管理不显示图片.相信附件或者其他方式的上传出现问题都可以用该方法去排除.注:需要将jsp附带的包放到项目中.

其中非常感谢dookay 网提供的图片上传的配置解析 http://www.dookay.com/zh-cn/n/929  所以作出笔记方便以后可以查询.

我下载的是utf-8 jsp版本的.

基本配置配置如下:

    <!-- 配置文件 -->  
        <script type="text/javascript" src="./js/editor/ueditor.config.js"></script>  
        <!-- 编辑器源码文件 -->  
        <script type="text/javascript" src="./js/editor/ueditor.all.js"></script>  
        <!-- 语言包文件(建议手动加载语言包，避免在ie下，因为加载语言失败导致编辑器加载失败) -->  
        <script type="text/javascript" src="./js/editor/lang/zh-cn/zh-cn.js"></script>  
        <!-- 显示插件 -->
        <link href="./js/editor/themes/iframe.css"rel="stylesheet"type="text/css"/>

       <script type="text/javascript">  
            var editor = UE.getEditor('container');
        </script>  


        <div class="text" style="height: 800px; 500px" >
         <script id="container" name="info" type="text/plain"> </script>
         </div> 

正常显示效果如下.如需要特殊编辑长度与显示的插件.可编辑ueditor.config.js里边的内容,看注释就知道说明了

当我们点击图片上传的时候,显示找不到数据,那么就是拦截器的问题,因为后台看到数据是有上传的,证明插件是没问题的.只是被默认的拦截器拦截了.从而导致上传失败.

自定义一个拦截器.如果自定义拦截器做了后还是不显示,那么就是有另外一个拦截器把这个url拦截了.

package com.ic.util;
 
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 UediorStrutsFilter extends StrutsPrepareAndExecuteFilter{
    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        String url = request.getRequestURI();         
       
        if (url.contains("/ueditor/jsp/")) {             
         //   System.out.println("使用自定义过滤器");             
            chain.doFilter(req, res);         
        }else{             
          //  System.out.println("使用默认过滤器");             
            super.doFilter(req, res, chain);         
        } 
    }
}

web.xml也是需要配置

  <filter>
      <filter-name>struts3</filter-name>
      <filter-class>
          com.ic.util.UediorStrutsFilter
      </filter-class>
  </filter>
  <filter-mapping>
      <filter-name>struts3</filter-name>
      <url-pattern>*</url-pattern>
      <dispatcher>REQUEST</dispatcher>
      <dispatcher>FORWARD</dispatcher>
  </filter-mapping>

上传图片成功的案例如图所示:

1.

2.

问题:为什么图片上传成功了,但是放到编辑器之后无法显示出来?

答:需要修改config.json 的配置 将imageUrlPrefix 改为你的项目/xxxx 这样就显示正常了.

3.现在就看看图片管理,成功案例如图所示:

问题:点击之后显示不出来,也调用不到.请问怎么调试?

答:找到image.js 这个js文件是配置图片的.需要更改代码 找到

  /* 添加图片到列表界面上 */ pushData的方法  将img.setAttribute 设置为 

urlPrefix  :项目的名字

list[i].url.substring(list[i].url.indexOf("ueditor"), list[i].url.length):截取图片所在的位置,在这里我是默认为ueditor存放路径

   img.setAttribute('src', urlPrefix + "/"+ list[i].url.substring(list[i].url.indexOf("ueditor"), list[i].url.length)  + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
   img.setAttribute('_src', urlPrefix + "/"+ list[i].url.substring(list[i].url.indexOf("ueditor"), list[i].url.length) );