SpringBoot之使用Ueditor

1.下载Ueditor

[http://ueditor.baidu.com/website/]

2.解压文件：

3.导入文件

在spring的static目录下创建ueditor文件，把解压的文件全部复制到这个文件下。
如图：

4.导入jar

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.10</version>
</dependency>
<!--UEDITOR上传文件必要的-->
<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.4</version>
</dependency>

5.打开官方的html：

了解一下结构，如果不上传文件，是可以直接使用。注意的我们的项目是springboot，说以，要想访问，就得把index文件改到static或templates通过映射来打开，记得更改index.html中的静态资源的路径。

6.修改源代码：

	修改源代码，因为官方提供的是JSP，所以引入之后图片上传等一些功能无法使用

修改ueditor.config.js
var server_url = window.location.protocol+"//"+window.location.hostname+":"+
window.location.port
serverUrl: server_url+"/config"
说明：官方的是调用jsp，来执行config.json文件。而我们使用springboot，所以需要一个映射来执行config.json文件。也就是说，这里的serverUrl值应为可以访问的url。具体的config在下面重点写出。

7.映射config（就是官方jsp的改版）

@Controller
public class uploadController {

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/utf8-jsp/jsp";
        try {
            response.setCharacterEncoding("UTF-8");
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println(exec);
            PrintWriter writer = response.getWriter();
            writer.write(new ActionEnter(request, rootPath).exec());
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

8.测试

出现下图：这是第6、7步骤没配置好。先检测serverUrl的配置是否能正常访问，
在检测config中代码是否有问题

出现下图，表示配置成功，只需要写上传代码，就可以把图片上传到服务

9.上传图片：

Js代码

//实例化编辑器
    var ue = UE.getEditor('editor');

//根据不同action上传图片和附件
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage') {
            return '${pageContext.request.contextPath}/upload/uploadimage';//上传路径
        } else if (action == 'uploadfile') {
            return '${pageContext.request.contextPath}/upload/uploadfile';//上传路径
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

java

@Controller
public class uploadController {

@RequestMapping(value="/uploadimage",method= RequestMethod.POST)
@ResponseBody
public Map<String, Object> uploadNewsImg(@RequestParam(value="upfile",required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {
    String pathurl="http://localhost:80/upload/slideshow/";//图片url前缀
    String SHILDESHOWFILE="src/main/resources/static/upload/slideshow";//保存图片的地址
    File directory = new File(SHILDESHOWFILE);
    String courseFile = directory.getCanonicalPath();
    // String path = request.getServletContext().getRealPath("/upload");
    File realPath = new File(courseFile);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    String fileName = file.getOriginalFilename();
    file.transferTo(new File(realPath +"/"+fileName));
    Map<String, Object> result = new HashMap<String,Object>();
    result.put("state", "SUCCESS");
    result.put("url", pathurl+fileName);
    result.put("original", "");
    result.put("type", 0);
    result.put("size", 0);
    result.put("title", fileName);
    return result;
}
}