使用Ueditor编辑器上传图片总结；

今天使用Ueditor编辑器上传图片一直出问题，在网上找了多种方法，最后总结如下：

Ueditor编辑器是百度开发的编辑器，要在jsp页面添加Ueditor编辑器，需要以下几步：

（1）到 http://ueditor.baidu.com/website/download.html 下载jsp版本的，解压后放到项目webContent目录下；

（2）将jsp/lib下的五个包添加到WEB-INF/lib下，注意，有不同版本包冲突的，删除原本存在的jar包。

（3）在所要添加的jsp页面添加以下代码

<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.all.min.js"> </script>

  <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/lang/zh-cn/zh-cn.js"></script>

并在你想放置的编辑器位置添加以下代码：

<script id="container" name="content" type="text/plain" style="width:480px">这里就是你要输入的文本内容</script>

  <!-- 实例化编辑器 -->

 <script type="text/javascript">

  　　 var ue = UE.getEditor('container');

 </script>

到这一步，运行项目，编辑器已经添加成功，可以进行编辑文字了，如下图：

使用Ueditor编辑器上传图片总结；

当时点击上传图片出现：后端配置项没有正常加载,上传插件不能正常使用或者未能找到上传图片或上传失败

后台是否报错：javax.servlet.ServletException: java.lang.NoSuchMethodError；

这时，先检查jar包是否冲突，一般使用SSH框架都会用到commons-io 和commons-fileUpload这两个包，而刚添加的jsp/lib下的包也包含这两个。

接下来就是和Struts2 整合：

　　　添加过滤器，过滤controller.jsp

package com.blog.filter;

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 UeditorStrutsFilter 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(request.getContextPath()+"/use/edit/ueditor/jsp/")) {

                chain.doFilter(req, res);

            }else{

                super.doFilter(req, res, chain);

            }

        }

}

修改web.xml文件：

 <filter>

　　<filter-name>myeditor</filter-name>

　　<filter-class>com.blog.filter.UeditorStrutsFilter</filter-class>

</filter>

<filter-mapping>

        <filter-name>myeditor</filter-name>

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

</filter-mapping>

重新编译项目，就可以上传图片了。

秒客网

使用Ueditor编辑器上传图片总结；

相关文章