Ueditor富文本图片无法上传

网络hunter

已于 2024-10-15 10:22:20 修改

阅读量1.4k

点赞数

分类专栏：《VUE》文章标签： html javascript 前端

于 2022-05-10 14:46:03 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/OuNuo5280/article/details/124688241

版权

《VUE》专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了如何配置Ueditor 1.2.4版本，包括在HTML中引入文件、初始化编辑器、设置编辑器根路径，以及解决因Struts拦截器导致的图片上传问题。此外，还提供了表情本地化的配置方法，确保表情图片正常显示。

摘要由CSDN通过智能技术生成

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

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

将Ueditor运行起来

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

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

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

ƒ在<body></body>中加入如下代码，将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;

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

* 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>struts2</filter-name>

     <filter-class>

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

     </filter-class>

   </filter>



<filter-mapping>

<filter-name>struts2</filter-name>

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

</filter-mapping>

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

<filter>

     <filter-name>struts2</filter-name>

     <filter-class>

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

     </filter-class>

   </filter>



<filter-mapping>

<filter-name>struts2</filter-name>

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

</filter-mapping>

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

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

Image.html中配置：

<div id="imageTab">

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



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





            </div>