第一步：https://ueditor.baidu.com/website/download.html#mini下載下傳插件 （小編選用的是jsp版本）
第二步：在背景項目存放插件
第三步：建立測試頁面，在改頁面引入需要的js和樣式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bbs.html</title>
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="umditor/themes/default/css/umeditor.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="umditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="umditor/umeditor.config.js"></script>
<script type="text/javascript" src="umditor/umeditor.min.js"></script>
<script type="text/javascript" src="umditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="umditor/bbs.js"></script>
</head>
<body>
<script type="text/plain" id="editor" name="editor" style="width:auto;height:240px;">
</script>
</body>
</html>
第四步：在js中進行初始化編輯器
$(function(){
var um = UM.getEditor('editor');
});
第五步：進行頁面通路,文本編輯器可以正常顯示
第六步：開始上傳圖檔并儲存到背景伺服器
(1)背景是用java進行圖檔的上傳并儲存到伺服器的指定位置，結合MultipartFile進行上傳，且傳回的時候必須以json格式傳回四個字段，否則沒辦法顯示圖檔
@RequestMapping(method = { RequestMethod.GET, RequestMethod.POST })
public void handle(HttpServletRequest request, HttpServletResponse response) {
// 轉型為MultipartHttpRequest：
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 獲得檔案：
MultipartFile uploadFile = multipartRequest.getFile("upfile");
// UEditor傳到背景的是這個upfile，其他的檔案上傳，應該也差不多是這個，還沒去研究，斷點一下就知道了
String fileName = uploadFile.getOriginalFilename();
String fileUploadPath = CommonUtil.trimString(appConfig
.get("backstageBbsImgMediaPath"));
if (fileUploadPath == null) {
throw new AdminControllerException("1000", "伺服器未指定存放檔案的路徑");
}
File outputFile = new File(fileUploadPath + fileName);
try {
uploadFile.transferTo(outputFile);
} catch (Exception e) {
throw new AdminControllerException("1003", "上傳圖檔出現異常");
}
UploadImageOutput output = new UploadImageOutput();
output.setOriginal(outputFile.getName());
output.setTitle(outputFile.getName());
String bbsImageShowRootPath = CommonUtil.trimString(appConfig
.get("bbsImageShowRootPath"));
if (bbsImageShowRootPath == null) {
throw new AdminControllerException("1000", "伺服器未指定存放檔案的路徑");
}
output.setUrl(bbsImageShowRootPath + fileName);
output.setState("SUCCESS");
JSONObject jsonObj = new JSONObject(output);
String result = jsonObj.toString();
try {
CommonUtil.getHttpServletResponse().setCharacterEncoding("UTF-8");
CommonUtil.getHttpServletResponse().getWriter().write(result);
CommonUtil.getHttpServletResponse().getWriter().flush();
} catch (Exception e1) {
}
}
（2）.将背景的圖檔上傳接口在umeditor的配置檔案中umditor/umeditor.config.js進行修改和配置
window.UMEDITOR_CONFIG = {
//為編輯器執行個體添加一個路徑，這個不能被注釋
UMEDITOR_HOME_URL : URL
//圖檔上傳配置區
,imageUrl:window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/" //圖檔上傳送出位址
,imagePath:URL + "jsp/" //圖檔修正位址，引用了fixedImagePath,如有特殊需求，可自行配置
,imageFieldName:"file_body" //圖檔資料的key,若此處修改，需要在背景對應檔案修改對應參數
（3）.上傳圖檔的時候有可能會出錯上傳出錯，需要修改umditor\dialogs\image\image.js在uploadComplete函數添加 r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');
uploadComplete: function(r){
var me = this;
try{
r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');
var json = eval('('+r+')');
Base.callback(me.editor, me.dialog, json.url, json.state);
}catch (e){
var lang = me.editor.getLang('image');
Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
}
},
（4）.上傳圖檔之後，如果沒有顯示，需要修改umditor\dialogs\image\image.js在callback函數
經過四個步驟圖檔就能上傳-->儲存--->回顯
第七步：獲得編輯器的内容并儲存到背景伺服器，主要通過UM.getEditor('editor').getContent();獲得編輯器中的内容
function addBbsHtml(){
var editor1=UM.getEditor('editor').getContent();
$.ajax({url:'後台位址',
data:{editor:editor1},
dataType:'json',
type:'post',
success:function(result){
if(result.state==0){
alert("添加成功")
}else{
alert("添加失敗"+result.msg);
}
}
});
}
![chatGPT4王炸大招來了!OpenAI宣布将ChatGPT從alpha更新到beta版本，允許ChatGPT通路互聯[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)