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

最新推荐文章于 2024-09-11 09:55:51 发布

a3226988

最新推荐文章于 2024-09-11 09:55:51 发布

阅读量2k

点赞数 6

分类专栏： Q技能文章标签： ueditor

本文链接：https://blog.csdn.net/a3226988/article/details/52768418

版权

Q技能专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>