ueditor和springmvc的集成

在web开发中, 富文本的编辑器真心很重要. 有电商店铺的打理, 新闻稿/博客文章/论坛帖子的编辑等等, 这种所见即所的编辑方式, 大大方便了非技术人员从事互利网相关的工作.

因为手头有个小项目, 正好涉及到这块, 所以决心好好研究一番. 中间也在ckeditor和ueditor之间徘徊了很久, 后来听闻大名鼎鼎的微信公众号也使用了ueditor, 因此最后倒向了ueditor.

本文将讲解如何集成springmvc+ueditor的一些要点, 并做下简单的展望.

ueditor简介:

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

ueditor的官网地址如下: http://ueditor.baidu.com/website/index.html.

由于涉及到图片上传的部分, ueditor并非纯javascript版本, 其出了php, java, asp等语言的支持版本.

源码的下载链接: http://ueditor.baidu.com/website/download.html.

集成:

ueditor的java版提供的是jsp版本的, 还附带了多个java依赖包. 以下是它的目录结构.

配置文件config.json, 定义了支持的上传文件/图片的接口, 以及限制, 这个很重要.

而当前的web开发, 往往都是基于maven来组织构建web工程的. 同时由于springmvc版本的框架限制. 还是得有一方进行妥协, 或者说是修改.

在这个的前提下, 我们来进一步的地细化集成的工作.

•依赖包采用maven的方式来组织构建

这样就引入了文件上传, 以及json序列化/反序列化处理的依赖包, ueditor-x.x.x.jar后面介绍.

•资源访问配置

单独把ueditor放入到webapp目录下, 因此在springmvc映射处理中需要排除.

•引入ueditor-x.x.x的源码

其实作为依赖包引入也可以, 只是引入源码, 方便功能的修改和增强. 和前一种方法相比, 我更加推荐后者, 即引入源码.

•添加controller处理类

该controller类照搬了ueditor中原本的controller.jsp的处理代码, 并改成springmvc的那种模式. 注意这边的处理ueditor操作的url path为: /ued/config. 它完成了编辑器初始化, 以及文件/图片的上传处理.

•配置config.json文件

config.json文件, 是定义文件/图片上传的接口, 以及各种限制(文件大小上限, MimeType类型框定).

具体配置的细节并不重要, 这边最重要的是:放在那里, 以及如何被读取到?

放的位置问题, 可以自由点, 让我们霸道一回, 就把config.json文件放置到webapp/conf目录下吧, ^_^.

然后如何被读取到呢? 原先ueditor的代码, 默认指定了请求的Context Path. 原因还是在jsp版本中, 默认controller.jsp和config.json是同目录.

然而现状已经发生变化了,若不修改源码会导致找不到配置文件config.json的错误. 因为寻找的路径和和我们设定的webapp/conf有出路.

在类ConfigManager修改后为:

这样就可以了, 这也是为什么, 我推荐使用源码引入的原因,这也是唯一一处必须需要修改的地方.

这也是最后一个步骤了, 我们需要制定编辑器访问服务器的初始地址.

注:修改serverUrl, 使得其指向自己的服务器地址.

这样整个ueditor和springmvc的集成配置工作就做完了, ^_^. 感觉还是有点赶鸭子上架, 却没有具体讲述原理.

验证:

验证过程, 相对比较简单一些.

引入编辑框代码:

初始化后, 编辑框如下:

请大家多多关注我的企鹅号，谢谢大家！