小米笔记

富文本编辑器是网站中十分常用的一个组件，无论是网站后台发布信息，前台评论回复发帖富文本编辑器是网站中十分常用的一个组件，无论是网站后台发布信息，前台评论回复发帖等操作，都离不开富文本编辑器的身影。

顶着百度的名头，UEditor是一个功能十分强大的富文本编辑器。然而不得不说，这货的文档写的实在是太烂了。

在刚刚开始使用时，就遇到了读取后台配置文件错误的问题，导致上传图片等功能不能使用。

初见

什么是UEditor？

DEMO

在百度的UEditor官网可以下载到各个版本的编辑器，我选择的是jsp+utf8的版本。

下载链接

然后你会欣慰的在顶部导航看到“文档”两个大字。

我对灯发誓，已经仔细的看过了这个文档。

然而谁要你来教我怎么部署jsp啊！！！

看来只能闭着眼睛摸索前进了，下载下来的文件结构如图所示

总体还算清晰明了。后台引用了jsp/lib下的包，然后我阅读了controller.jsp……

准备工作

引入ueditor

将ueditor放到webapp目录下

添加Maven支持

<!-- 上传文件的支持 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.10</version>
</dependency>

<!-- org.json -->
<!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20160212</version>
</dependency>

资源访问配置

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

<mvc:resources mapping="/ueditor/**" location="/ueditor/" />

引入ueditor源码

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

编辑器初始化Controller

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

@Controller
@RequestMapping("/ue")
public class UEditorController {
    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = request.getSession()
                .getServletContext().getRealPath("/");

        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

配置config.json文件

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

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

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

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

private String getConfigPath () {
    return this.parentPath + File.separator + ConfigManager.configFileName;
}

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

private String getConfigPath () {
    return this.rootPath
            + File.separator + "conf"
            + File.separator + ConfigManager.configFileName;
}

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

修改ueditor.config.js

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

window.UEDITOR_CONFIG = {
    //为编辑器实例添加一个路径，这个不能被注释
    UEDITOR_HOME_URL: URL

    // 服务器统一请求接口路径
    //      原先默认的
    //, serverUrl: URL + "jsp/controller.jsp"
    //      修改后的
    , serverUrl: "/ued/config"

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

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

验证

验证过程，相对比较简单一些。引入编辑框代码，如果编辑器图片能正常上传就OK了:

<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.min.js"></script>
<script src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<script type="text/javascript">
   var editor = UE.getEditor('container');
</script>

在查阅网上资料的时候, 也见过其他的集成方式的. 比如添加额外的servlet(path只匹配ueditor), 单独处理ueditor的jsp. 这样也能很好的做到集成, 也省心省力. 不过采用后者, 可以修改图片上传的模式, 比如放置到专门的图片服务器. 这也是服务做大的一个必经之路.