在项目中遇到一些自自定义的页面,需要富文本框编辑器来编辑然后把编辑内容存放到数据库中,通过加载模版,把内容填充到模版网页中,在整合过程遇到了上传不了图片和图片上传成功却不能在富文本框中显示的问题,困扰了我很久,今天恰好解决,因此写一篇博客记录下,加深记忆也希望能帮到大家!
一:创建springboot项目
在idea中点击file按钮,然后单击new,新建一个project,在创建一个project时选择spring Initalizr,然后选择下一步,输入工程名称,一直按提示到完成创建springboot项目
二:去百度ueditor官网下载jsp版本
官方网址为:https://ueditor.baidu.com/website/download.html,在最喜版本下下载jsp的utf-8版本,等待下载完成后解压
三:在springboot项目中的resource下创建static文件夹并把解压好的文件夹放到该文件夹下
在resource下创建一个名为index的页面文件,并把ueditor下的index页面内容复制到刚才创建的页面中,注意引入js和css的路径,然后把config.json拷贝到resource下,并配置访问路径前缀和上床图片保存路径
上传文件的基本路径可以自定义配置成你所需要的路径!
四:创建上传图片所需要的java类
目录结构如下图所示
下面我就把这些类的代码贴出来,以供参考之用
UEditorController类代码,上传图片的类
package com.example.demo.example;
import com.example.demo.ActionEnter;
import org.json.JSONException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by ldb on 2017/4/9.
*/
@Controller
public class UEditorController {
@RequestMapping("/")
private String showPage(){
return "index";
}
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response) throws JSONException {
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();
}
}
}
然后在ueditor.config.js中配置服务器同意接口路径
经过上面几个步骤就可以完成上传图片和图片回显功能了,其它的代码详见:https://github.com/lijobs/ueditor_upload_images下载下来就可以用了,如果您觉得我的代码解决了您的问题,还请麻烦start下,感激不尽!!