前几天了一个项目,用的ckeditor,但是配置起来相当麻烦,而且不灵活,帮助文档又全是英文的。这几天要做一个项目用到回复功能,如果再实用ck感觉太小题大做了,朋友介绍了ueditor!(我才发现51CTO就在用)

   优点:无论从二次开发、UI体验、配置繁简性、个性化灵活性、功能方面,ueditor都完胜ckeditor;

   缺点:上传路径不改源码的话不能自定义、安全性(如果不外加设置,谁都可以访问上传页面)。


1.下载解压

2.使用

  • 导入js

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
  • 导入jar:将ueditor1_3_5-utf8-jsp\jsp中commons-fileupload-1.2.2.jar和ueditor.jar还有commons-io-2.2-bin.tar.gz解压后的commons-io-2.2.jar导入项目lib包中

  • 生成编辑器


<textarea name="content" id="myEditor">这里写你的初始化内容</textarea>
    <script type="text/javascript">
        UE.getEditor('myEditor');
    </script>
  • 修改配置文件ueditor.config.js

    包括资源跟路径和上传路径,例如:

    175156695.png也可以自定义一些属性,如修改功能按钮、允许输入的字符个数、长宽等等

  • 测试

    175412192.png

当然,这里的按钮个数是我根据自己需要自定义的,完整版有很多功能。

3.常见问题

   如果在含有struts的项目中实用就要注意了,struts的过滤器不会单独处理ueditor的上传页面地址,会导致上传出错,所以要单独处理。加一个filter:

034806930.png

public class ueditorFilter extends StrutsPrepareAndExecuteFilter {
public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain)
throws IOException, ServletException {
       HttpServletRequest request = (HttpServletRequest) req;
       //不过滤的url
       String url = request.getRequestURI();
       if ("/compus/ueditor/jsp/p_w_picpathUp.jsp".equals(url)) {
          //其他 /jsp/ 下的几个路径同理
           chain.doFilter(req, res);
       }else{
           super.doFilter(req, res, chain);
       }
   }
}