1、準備工作
1.1、下載ueditor
打開網站https://ueditor.baidu.com/website/download.html下載如圖所示兩個文件
image.png
1.2、將源碼文件夾下的：?jsp? / ?src? / ?com? / ?baidu?/ueditor 放入自己工程中，修改一些引入的錯誤
1.3、將源碼文件夾下的jsp?：config.js文件放入項目中webapp目錄下的新建文件夾config中，如下圖所示：
image.png
1.4、 另外由于在上一步中，把config.json文件放置到了src/main/webapp/config目錄下，而在ConfigManager類中需要讀取該json文件的內容，所以需要在ConfigManager.java文件中修改少量代碼，大約在170多行，修改如下：
image.png
1.5、編寫controller接口如下：
import javax.servlet.http.HttpServletRequest;
import org.json.JSONException;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/ueditor")
public class UEditorController {
@RequestMapping(value = "/upload")
public String editorUpload(HttpServletRequest request) throws JSONException {
String rootPath = request.getSession().getServletContext().getRealPath("/");
return new ActionEnter(request, rootPath).exec();
}
}
1.6、修改config.json文件中的圖片保存路徑，如下圖所示：
image.png
1.7、修改BinaryUploader類如下：
public class BinaryUploader {
public static final State save(HttpServletRequest request, Map<String, Object> conf) {
InputStream fileStream = null;
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
}
try {
//修改了百度使用原生的commons上傳方式
DefaultMultipartHttpServletRequest multipartRequest = (DefaultMultipartHttpServletRequest) request;
Iterator<String> fileNames = multipartRequest.getFileNames();
MultipartFile file = null;
while (fileNames.hasNext()) {
file = multipartRequest.getFiles(fileNames.next()).get(0);
fileStream = file.getInputStream();
}
if (fileStream == null) {
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
String originFileName = file.getOriginalFilename();
String suffix = FileType.getSuffixByFilename(originFileName);
originFileName = originFileName.substring(0, originFileName.length() - suffix.length());
savePath = savePath + suffix;
long maxSize = (Long) conf.get("maxSize");
if (!BinaryUploader.validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}
savePath = PathFormat.parse(savePath, originFileName);
State storageState = StorageManager.saveFileByInputStream(fileStream, savePath, maxSize);
fileStream.close();
if (storageState.isSuccess()) {
String[] str = savePath.split("/");
storageState.putInfo("url", "images/" + str[str.length - 1]);
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}
return storageState;
} catch (ClassCastException e) {
return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
} catch (IOException e) {
return new BaseState(false, AppInfo.IO_ERROR);
}
}
private static boolean validType(String type, String[] allowTypes) {
List<String> list = Arrays.asList(allowTypes);
return list.contains(type);
}
}
2、前端配置
2.1、修改前端項目中ueditor.config.js中的serverUrl的值為你寫的接口url:
domain+/ueditor/upload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ueditor-demo</title>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/ueditor/ueditor.config.js"></script>
<script src="/lib/ueditor/ueditor.all.min.js"></script>
<script src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
#submit {
width: 100px;
height: 30px;
line-height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>ueditor測試使用</h2>
<script id="editor" type="text/plain"></script>
<div style="margin-top: 20px; text-align: center;">
<input type="button" class="btn btn-blue w-100" value="提 交" id="submit">
</div>
<script>
$(function () {
//實例化編輯器
var ue = UE.getEditor('editor',{
initialFrameWidth:"100%", //初始化寬度
initialFrameHeight:400, //初始化高度
});
$('#submit').click(function () {
//獲取ueditor編輯框中的html文本內容
var content = UE.getEditor('editor').getContent();
$.ajax({
url: 'http://172.16.4.160:8081/ssm_project/news/addNews.do',
type: 'POST',
data: {
content: content,
},
dataType: 'json',
success: function (res) {
console.log(res);
},
error: function () {
console.log(res);
}
})
})
})
</script>
</body>
</html>
3、參考
https://zhuanlan.zhihu.com/p/30094750
https://my.oschina.net/u/1170843/blog/1204371
https://cloud.tencent.com/developer/article/1021942
http://www.lxweimin.com/p/6ef85666d212
