spring整合Ueditor富文本编辑器

一、去Ueditor官网看看开发文档

地址：ueditor
官方文档说的不是很明白，去github看看：点击

应该就是jsp这个文件夹中的代码，下载下来。

接下来就是搭建一个spring工程，使用IDEA来搭建maven工程， 目录如下：

测试一下：

二、spring后台整合

首先解压刚才下载的代码，直接进入jsp文件夹观察：

1. 第一点，一看就是依赖的jar包
2. 第二点，源码文件
3. 第三点，ueditor配置文件
4. 第四点，应该是一个类似controller接口的文件

接下来，我在我的项目中加入这些jar包，由于是maven项目，还是加入依赖比较好：

<!-- Ueditor依赖包 -->
    <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.5</version>
    </dependency>
    <dependency>
      <groupId>commons-codec</groupId>
      <artifactId>commons-codec</artifactId>
      <version>1.9</version>
    </dependency>
    <dependency>
      <groupId>org.json</groupId>
      <artifactId>json</artifactId>
      <version>20160807</version>
    </dependency>

将源码文件加入项目中:

如果你的包名不是com.baidu.ueditor的话，还需要花点时间改改import中的包名

然后，将配置文件config.json放入resources中

最后就要看一看jsp文件到底写的什么逻辑

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
    response.setHeader("Content-Type" , "text/html");

    String rootPath = application.getRealPath( "/" );

    out.write( new ActionEnter( request, rootPath ).exec() );

%>

这个文件就是调用ActionEnter类的exec()方法，然后执行一系列的操作。写一个mvc接口来代替jsp文件：
DemoController.java

package com.demo.controller;

import com.demo.ueditor.ActionEnter;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;


/**
 * @author xyd
 * @version V1.0
 * @Package com.demo.controller
 * @Description:
 * @date 2018/8/6 17:19
 */
@RestController("demo")
@RequestMapping("/ueditor")
public class DemoController {
   

    @RequestMapping(value = "/exec")
    @ResponseBody
    public String exec(HttpServletRequest request) throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
        String rootPath = request.getRealPath("/");
        return new ActionEnter( request, rootPath ).exec();
    }

}

后台的代码基本上就整合完毕了，现在需要前端页面进行配合测试。

接下来要去官网下载前端页面

地址：点击
下载jsp版本后目录：

之前我们使用了jsp中的代码，现在我们需要的是前端页面，所以我们可以吧jsp文件夹删掉。

通过查看官方文档，可以看出要想整合前端后台，必须配置ueditor.config.js中的serverUrl，

找到文件，将serverUrl替换成有效的url：

这时应该将后台代码打包放入服务器中，但是打包之前还是得测试一下http接口是否生效：

可以了，打包上传代码！这时，后台代码在服务器中，前端代码在本地。

这样，好像基本整合完了！

但是！测试一下图片上传:

结果报错了，上传不了。看到origin “null” ，应该就是源ip为null报的错，那就把前端代码也放入服务器中。

这里看到，整合是没问题了。

三、问题

1、在整合的时候没有配置config.json

就是config.json是个配置文件，我们还没有配置，现在修改一下：

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */