SpringBoot整合Ueditor富文本编辑器
.json：上传功能的主要配置项
..js：完整配置项
2.在页面中引用（此处用的是）：
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js">script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js">script>
3.实例化编辑器：
<div><script name="text" id="editor" type="text/plain" style="width:100%;height:800px;">script>
div><script type="text/javascript">/*实例化编辑器 */var um = UE.getEditor('editor');
script>
注意：此时上传功能不正常，可以在开发者工具中看见“后端配置项不正确，上传功能无法使用”的情况
问题缘由：
请求过来了，它会走 .jsp，但是 默认是不支持 jsp 的，然而这个 jsp 它是指向 .json 的，打开 .json，第一个就是图片上传的相关配置：
所以就是 它无法访问 .jsp，也就无法读到 .json 里的相关配置，所以报错。
解决办法：
思路：既然 无法通过 jsp 访问到 .json，那就不走 jsp，直接让它获得 .json 里的配置。
1.新建一个，内容如下：
/*** 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题* @return*/
@RequestMapping("/ueditor/config")
@ResponseBody
public String uploadConfig() {String s = "{\n" +" \"imageActionName\": \"uploadimage\",\n" +" \"imageFieldName\": \"upfile\", \n" +" \"imageMaxSize\": 2048000, \n" +" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +" \"imageCompressEnable\": true, \n" +" \"imageCompressBorder\": 1600, \n" +" \"imageInsertAlign\": \"none\", \n" +" \"imageUrlPrefix\": \"\",\n" +" \"imagePathFormat\": \"/upload/images/{yyyy}{mm}{dd}/{filename}\" }";return s;
}
2.修改 ..js 里的 为上面定义的 url
3.因为项目是以jar打包的，我希望将文件上传到项目目录中，因此我新建一个SSM项目（）作为文件上传服务器，即实现跨服务器文件上传
创建文件服务器流程：
新建一个maven项目，选择web骨架创建：
项目创建好后，不需要做任何配置，只需配置启动即可
启动文件服务器，在浏览器访问：
4.接下来在配置编辑器的页面配置一下上传：
// 手动指定上传文件调用的接口（不同文件类型不同接口）
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样if(action == 'uploadimage'){// 这里调用后端我们写的图片上传接口return '/ueditor/upload';}else if(action == 'uploadfile'){return '/ueditor/upload';}else{return this._bkGetActionUrl.call(this, action);}
};
即：
<script type="text/javascript">/*实例化编辑器 */var um = UE.getEditor('editor');// 手动指定上传文件调用的接口（不同文件类型不同接口）
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样if(action == "uploadimage"){// 这里调用后端我们写的图片上传接口return "/ueditor/upload";}else if(action == "uploadfile"){return "/ueditor/upload";}else{return this._bkGetActionUrl.call(this, action);}
};
script>
5.后端定义图片上传接口（使用自带的上传是不现实的）
import com.sky.blog.admin.commons.BaseController;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;@Controller
public class UploadController {@PostMapping("/ueditor/upload")@ResponseBodypublic Map<String,String> uploadImage(MultipartFile upfile, HttpServletRequest request){String originalName = upfile.getOriginalFilename();String fileSuffix = originalName.substring(originalName.lastIndexOf(".";));//生成新文件名Calendar now = Calendar.getInstance();int year = now.get(Calendar.YEAR);int month = now.get(Calendar.MONTH) + 1;int day = now.get(Calendar.DAY_OF_MONTH);int hour = now.get(Calendar.HOUR_OF_DAY);int minute = now.get(Calendar.MINUTE);int second = now.get(Calendar.SECOND);Random random = new Random();String newName = ""+year+month+day+hour+minute+second+random.nextInt(100) + fileSuffix;//文件存放路径String path = "http://localhost/upload/images/" //这里就是我们刚刚创建的文件服务器 // 创建客户端的对象Client client = Client.create();//和图片服务器进行连接String url = path + newName;WebResource webResource = client.resource(url);// 上传文件try {webResource.put(upfile.getBytes());} catch (IOException e) {e.printStackTrace();}Map<String,String> result = new HashMap<>();result.put("state","SUCCESS");result.put("url",url);result.put("title",newName);result.put("original",newName);return result;}
}
接下来编辑器就可以上传图片啦，还有一些上传视频，音乐的功能也可以类似的编写后台接口来实现。
存在的问题：
这样实现的跨服务器文件上传是不安全的，因为文件服务器没有任何权限限制，只要知道服务器地址即可无限制地上传文件，因此这个问题有待解决，后续我将花时间继续研究。
