Ueditor富文本图片无法上传

Ueditor是国内用户量较少但实用性强的富文本编辑器，网上关于配置的讲解都是老版本，这里用的是最新的1.2.4版本，主要讲解关于图片上传的配置和附件配置，以及表情本地化后图片红叉的问题。

废话不多说，直接开始了……

将Ueditor运行起来

先看一下项目这一块的目录，红叉是因为开发工具的版本问题，不用管。

 ‚在中引入三个主要文件，怕路径出错的干脆就直接用绝对路径万无一失

<script type="text/javascript" src="ueditor/editor_config.js">script>

<script type="text/javascript" src="ueditor/editor.js">script>

<link rel="stylesheet" href="ueditor/themes/default/ueditor.css"/>

  ƒ在中加入如下代码，将Ueidtor开启

<textarea name="message.content" id="myEditor">textarea>   //这里的name是自己起的，对象名.字段名，用的是容器注入方式，为了后面传值用的，大家不必管这里，要注意的是这里的id，和下面的要对应上。

<script type="text/javascript">

     var editor = new UE.ui.Editor({

     //initialStyle :'p{border-bottom:1px dashed #CCC;padding: 5px;font-size:12px;}'//这里是编辑器框内的样式，可以去掉注释看一下效果

         });

     editor.render("myEditor");

    

script>

   „修改配置文件，将编辑器效果显示出来

找到ueditor中的editor_config.js文件，打开之后找到如下代码：

* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。

* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";

*/

var URL;

看到这一段代码了吗，修改成下面这样：

* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。

* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";

*/

window.UEDITOR_HOME_URL = "/UEditorTest/ueditor/";---这里就是把上面注释的在这里写一遍，引号中为“/项目名/ueditor名/”，这里一定要写正确哦！

var URL;

到这里，就可以运行tomcat看看了，输入对应的路径比如：http://localhost:8080/项目名/index.jsp看看效果吧。

效果如下图：

我只选取了这些功能，所以和完整的工具栏相比要少一些，自己控制这些工具栏的选项同样在配置文件editor_config.js中：

找到该配置文件中的‘,toolbars:’选项，然后将其注释再拷贝一下另起一行，该留哪些就看自己的意思了。

上传图片功能的配置，这个官方的文档比较笼统，如果不是有人告诉你的话你基本上很难整出来。

上面的效果出来之后，比如文字的处理这些基本功能是没问题的，但像上传这种功能却存在问题，往往点击上传图片时会出现进度条运行一半就直接出现红叉，又不报错，反正就是上传不了。

就是这个StrutsPrepareAndExecuteFilter，是不是很熟悉，没错，用struts时候，web.xml都会配置这个东西。

原因如下：jsp版本，如果你用的是struts（大多应该都是用这个）来集成ueditor，默认的拦截器影响了你的图片上传，所以我们就要自己配置一个过滤器，让imgUp.jsp文件不被过滤掉，这样上传图片功能就没问题了。

下面我们来配置自定义过滤器：

新建一个java文件:MyStrutsFilter.java，代码如下：

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;  

        //不过滤的url  

        String url = request.getRequestURI();  

        System.out.println(url);  

    if ("/UEditorTest/ueditor/jsp/imageUp.jsp".equals(url)  //这里的路径应该能看懂吧，就是让你需要的这些文件不再被过滤掉

         ||"/UEditorTest/ueditor/jsp/fileUp.jsp".equals(url)

        ) {  

            System.out.println("使用自定义的过滤器");  

            chain.doFilter(req, res);  

        }

        else{  

            System.out.println("使用默认的过滤器");  

            super.doFilter(req, res, chain);  

        }  

    }  

}

打开web.xml，可以看到原先使用配置struts的时候写的过滤器如下：

<filter>  

     <filter-name>struts2filter-name>  

     <filter-class>

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

     filter-class>  

   filter>  

  

<filter-mapping>

<filter-name>struts2filter-name>

<url-pattern>/*url-pattern>

filter-mapping>

将其修改为新的过滤器，如下：

<filter>  

     <filter-name>struts2filter-name>  

     <filter-class>

     Com.xfrj.util.MyStrutsFilter -----------这里就是你之前新建的java文件所在的位置哦

     filter-class>  

   filter>  

  

<filter-mapping>

<filter-name>struts2filter-name>

<url-pattern>/*url-pattern>

filter-mapping>

过滤器配置好之后，上传图片功能和附件功能应该就没有问题了，重新启动下项目，然后在浏览器运行看下效果，如图：

最后再添加一句，如果你不想要上传图片有这么多选项的话，只想点击上传图片之后d出层里面只有‘本地上传’这一个选项，那就在

Image.html中配置：

<div id="imageTab">

            <div id="tabHeads" class="tabhead">

                <span tabSrc="local" class="focus"><var id="lang_tab_local">var>span>

            div>

找到image.html文件后，你会看到如上的一段代码，将local那一行留下，其他注释掉就可以了。

最终效果如下：

这里就只有本地上传了，呵呵。

表情本地化的问题

首先，表情本地化就要配置，依旧在editor_config.js中，找到如下代码：

,emotionLocalization:true //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹

这里原先是被注释的，取消注释后改成true即可。

    

本地化后，看一下表情栏的图片是否还有问题，没有问题最好，有问题的话就要参照官方帮助中的一段话进行排除，官方帮助原话如下：

看到了吧，首先确认下images文件夹下面的所有图片是否存在，这里有时候容易被疏忽，因为下载的时候没下载全，如果不全的话就把所有表情图片加进去，所有表情图片如图所示才是正确的：

其次，不行的话，就点击一个红叉叉表情，然后点一下它就会出现几个选项，选择修改。

----选修改

就可以看到这个表情的整个路径，你看下是不是能对应上你项目中的表情图片所在路径。

如果对不上，就是因为editor_config.js中的那个url你没有配置正确，这里的配置在最开始我已经用红色字体特别声明了。

表情本地化很简单，只是因为不细心才会出错，按照步骤来的话是不会出现类似问题的。

表情效果如图：