Ueditor富文本编辑器在JSP中的使用

Ueditor是一款强大的富文本编辑器

Ueditor的使用

• 去ueditor官网下载对应版本的文件，这里使用JSP版本的举例，下载后得到以下文件
  

• 打开MyEclipse创建一个新的web项目 ，将所有文件复制到webroot目录下

• 其中index.html就是ueditor的使用示例

• 我们这里按照示例新建一个JSP来使用
• 在页面中创建一个script标签

<sctipt id="editor" type="text/plain"  style="width:500px;height:200px;"></sctipt>

• 使用js将创建的script渲染成富文本编辑器

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

• 至此打开页面就能开到富文本编辑器的效果
• 
• 但一般我们使用的页面标签是表单标签，方便于通过表单提交编辑器里的数据，所以使用script标签不合适，我们可以替换为textarea标签。
• 运行成功后，一般会报错，是因为我们还需要配置下文件上传、图片上传的一些配置
• 上传文件的配置
• 打开jsp文件夹里的lib文件夹，这里面是上传文件需要的jar，将里面的jar添加到项目中去，如果使用的是Maven，那么需要手动的添加uetidor的jar上传到本地仓库再引用。不过远程的maven仓库里也有网友上传的的jar，可以q去http://mvnrepository.com/搜一搜。
• 修改jsp文件夹里config.json文件，这个是所有上传的配置，里面有图片上传、涂鸦上传、文件上传等等的配置，我们需要用到什么功能就选择修改其中的某个配置即可。
• 例如我只需要使用上传图片的功能，那么我就修改其中图片上传这部分的配置。里面都有中文的注释，看起来很方便
• 将其中的imagePathFormat属性的值是上传的文件的路径，改成自己当前项目的文件目录，你可以在webroot下新建一个目录用来存放例如新建一个upload

"imagePathFormat": "upload/{yyyy}{mm}{dd}/{time}{rand:6}" 

• 至此上传图片也可以了
• 在使用过程中点击图片上传可能会出现卡顿的情况，一般是由于上传图片按钮默认会去检测要上传的文件后缀，默认的配置是获取所有后缀的文件，导致程序解析是响应太慢。我们上传图片一般只需要.peg,.jpg,.jpeg,.gif。所以我们需要修改默认配置。

• 打开ueditor的ueditor.all.min.js文件（这里我使用ueditor的时候引用的是ueditor.all.min.js文件，如果你使用ueditor.all.js，则打开ueditor.all.js）。找到”accept” 或者”image/*”

  accept=”image/*”
  修改为
  accept=”image/jpeg，image/jpg,image/png,image/gif”
  这样就解决卡顿的问题

• 如果要获取编辑器的内容，一般直接通过表单提交，也可以通过JS获取

 UE.getEditor('editor').getContent()`   

Ueditor与Sruts2结合使用时上传图片无法使用 是因为strut2在web.xml里配置了/*的过滤器，将上传的请求过滤掉了

• 所以只要让strut2忽略掉这个请求即可 解决方案有两种：
  
  • 第一种：将/* 改为*.action，那么所有的struts2请求都要加.action后缀
  • 第二种：添加自定义过滤器，忽略掉上传图片的请求

public class MyFilter extends StrutsPrepareAndExecuteFilter {
    @Override
    public void doFilter(ServletRequest arg0, ServletResponse arg1,
            FilterChain arg2) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) arg0;
        String url = req.getRequestURI();
        if(url.equals("/ueTest/jsp/controller.jsp")){
            System.out.println("通过");
            arg2.doFilter(arg0, arg1);
        }else{
            super.doFilter(arg0, arg1, arg2);
        }
    }
}

Web.xml里的配置

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>filter.MyFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

-其次，如果使用的是Myeclipse工具，添加的struts2的包里有commons-io的jar包，与ueditor添加的io包重复了，需要删除其中的，那么删除版本低的即可。

与SpringMVC整合没有什么特别的地方