参考 https://blog.csdn.net/weixin_34023982/article/details/88273308
####依赖
<!--ueditor -->
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
1.下载 jsp 版本 和完整源码版本
1--.将jsp版本里的内容复制到 /static 目录下
2---将源码版本的 ueditor-1.4.3.3.zip\ueditor-1.4.3.3\jsp\src\com 下的baidu文件夹拷贝至 项目src/main/java/com/目录下
3.更改编辑页面引用js的路径
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>人事处</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Content-Type" content="IE=edge,chrome=1;charset=utf-8"">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/font.css">
<#--<link rel="stylesheet" type="text/css"-->
<#--href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.min.css">-->
<#--<link rel="stylesheet" type="text/css"-->
<#--href="${request.contextPath}/static/admin/lib/editor_md/css/editormd.preview.min.css">-->
<link rel="stylesheet" href="${request.contextPath}/static/admin/xadmin/css/xadmin.css">
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/xadmin.js"></script>
<#--<script type="text/javascript" src="${request.contextPath}/static/admin/xadmin/js/cookie.js"></script>-->
<#--<link rel="stylesheet" href="${request.contextPath}/static/admin/css/side.css"/>-->
<link rel="stylesheet" href="${request.contextPath}/static/admin/css/pintuer.css"/>
<script type="text/javascript" class="library" src="${request.contextPath}/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/pintuer.js"></script>
<#--引入alert的css文件-->
<link href="${request.contextPath}/static/admin/css/alert.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/ueditor.all.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
div{
width:100%;
}
</style>
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<#--<a href="">演示</a>-->
<a>
<cite>添加文章</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
<div class="container-fluid">
<div class="x-body">
<div class="main">
<div class="panel">
<div class="panel-body">
<br/>
<form id="commentForm" accept-charset="UTF-8" >
<div class="form-group">
<table class="table table-responsive">
<tr>
<td>新闻标题</td>
<td>
<input type="text" style="width: 735px;" name="title" class="input input-small required" required="required">
</td>
</tr>
<tr>
<td>副标题</td>
<td><input type="text" class="input input-small " style="width: 735px;"
name="subtitle" id="subtitle"></td>
</tr>
</table>
<br/>
<input type="text" class="input input-small " style="width: 735px;display: none"
name="content" id="content" >
<div><label>新闻内容</label></div>
<br/>
<div>
<#--<div id="my-editormd" class="editormd">-->
<#--<textarea id="my-editormd-markdown-doc" class="editormd-markdown-textarea required"-->
<#--name="content" style="display:none;" ></textarea>-->
<#--<!-- 注意:name属性的值–>-->
<#--<textarea class="editormd-html-textarea" id="my-editormd-html-code"-->
<#--name="my-editormd-html-code" style="display:none;"></textarea>-->
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
// </div>
</div>
<div id="app">
<table class="table table-responsive ">
<tr>
<td>所属栏目:</td>
<td>
<select class="input input-small required" name="Navigate2" id="Navigate2" @change="getChild()"
style="width: 152px" required>
<option value="-1" disabled selected>请选择</option>
<option v-for="sort in navigate" v-bind:value="sort.id" v-if="sort.parentId==null&&sort.name!='机构设置'" value="{{sort.id}}" >
{{sort.name}}
</option>
</select>
</td>
</tr>
<tr id="navigate">
<td>所属子栏目:</td>
<td>
<select class="input input-small required" name="navigate" id="navigate"
style="width: 152px" required>
<option value="-1" disabled selected>请选择</option>
<option v-for="sort2 in navigate" v-bind:value="sort2.id" v-if="sort2.parentId==a&&sort2.name!='人才政策'" value="{{sort2.id}}">
{{sort2.name}}
</option>
</select>
</td>
</tr>
<tr id="newsSource">
<td>新闻来源:</td>
<td>
<select name="source" class="input input-small" style="width: 150px;" required>
<#--<option value="" >请选择</option>-->
<option v-for="n in newsSource" v-bind:value="n.id">
{{n.name}}
</option>
</select>
</td>
</tr>
<tr>
<td>关键字:</td>
<td>
<select class="input input-small" name="type" style="width: 150px;" required>
<#--<option value="" selected>请选择</option>-->
<option v-for="t in type" v-bind:value="t.id">
{{t.name}}
</option>
</select>
</td>
</tr>
<tr>
<td>新闻作者:</td>
<td><input class="input input-small required" style="width: 152px;" type="text"
name="author"
></td>
<td></td>
</tr>
<tr>
<td>责任编辑:</td>
<td><input class="input input-small required" style="width: 152px;" type="text"
name="editor"></td>
<#--<tr>-->
<#--<td>点击:</td>-->
<#--<td><input class="input input-small" style="width: 152px;" type="number" id=""-->
<#--name="click" ></td>-->
<#--<td></td>-->
<#--</tr>-->
</tr>
<input type="number" id="" name="click" value="1" hidden>
<tr>
<td>
显示轮播图:
</td>
<td>
<select class="input input-small" style="width: 152px;" name="carousel">
<option>否
</option>
<option>是</option>
</select>
</td>
</tr>
<tr>
<td>发布日期:</td>
<td><input type="date" class="input input-small required"
style="width: 190px;"
name="releaseTime" ></td>
<td></td>
</tr>
<#--<tr>-->
<#--<td>可选属性:</td>-->
<#--<td>-->
<#--<input type="checkbox" name="1">头条-->
<#--<input type="checkbox" name="1">滚动-->
<#--<input type="checkbox" name="1">推荐-->
<#--<input type="checkbox" name="1">幻灯-->
<#--<input type="checkbox" name="1">置顶-->
<#--</td>-->
<#--<td></td>-->
<#--<td></td>-->
<#--</tr>-->
<tr>
<td>新闻摘要:</td>
<td colspan="3"><textarea class="input" name="digest" placeholder="选填"></textarea></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="box">
<input type="button" class="button" onclick="submitForm()" value="提交">
</div>
</form>
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/vue.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/lib/vue_resource/dist/vue-resource.min.js"></script>
<#--引入alert-->
<script src="${request.contextPath}/static/admin/js/alert.js"></script>
<#--<script src="${request.contextPath}/static/admin/js/bootstrap.min.js"></script>-->
<script src="${request.contextPath}/static/admin/js/jquery.nicescroll.min.js"></script>
<#--<script src="${request.contextPath}/static/admin/lib/editor_md/editormd.min.js"></script>-->
<#--页面加载**js**-->
<script src="${request.contextPath}/static/admin/js/jquery.mloading.js"></script>
<!-- content YDC end -->
<script type="text/javascript" src="${request.contextPath}/static/admin/js/nicEdit.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/admin/js/upImg.js"></script>
<#--edit.md-->
<#--<script src="${request.contextPath}/static/admin/lib/editor_md/editormd.min.js"></script>-->
<#--<script src="${request.contextPath}/static/admin/lib/editor_md/lib/marked.min.js"></script>-->
<#--<script src="${request.contextPath}/static/admin/lib/editor_md/lib/prettify.min.js"></script>-->
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
// //全局禁用回车键
document.onkeydown = function () {
if (window.event && window.event.keyCode == 13) {
window.event.returnValue = false;
}
}
$(function () {
var ue = UE.getEditor('editor');
function isFocus(e){
alert(UE.getEditor('editor').isFocus());
UE.dom.domUtils.preventDefault(e)
}
function setblur(e){
UE.getEditor('editor').blur();
UE.dom.domUtils.preventDefault(e)
}
//加载编辑器
<#--var EditorMd;-->
<#--EditorMd = editormd("my-editormd", {//注意1:这里的就是上面的DIV的id属性值-->
<#--width: "100%",-->
<#--height: 800,-->
<#--syncScrolling: "single",-->
<#--path: "${request.contextPath}/static/admin/lib/editor_md/lib/",//注意2:你的路径-->
<#--saveHTMLToTextarea: true,//注意3:这个配置,方便post提交表单-->
<#--imageUpload: true,-->
<#--imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],-->
<#--imageUploadURL: "${request.contextPath}/admin/saveContentImg",//注意你后端的上传图片服务地址-->
<#--});-->
//获取数据
loadData();
});
function loadData() {
$.ajax({
dataType: "JSON",
type: "POST",
url: "${request.contextPath}/admin/getNewsSourceAndTypeList",
success: function (result, state) {
console.log(result);
getVue(result, state);
// refreshEnd();
},
error: function (result, state) {
// refreshEnd();
alertWarning("网络异常");
console.log(state)
}
});
// refreshEnd();
}
//利用Vue填充信息
var v;
function getVue(r, s) {
v = new Vue({
el: "#app",
data: {
//数据赋值操作
result: r,
//新闻来源
newsSource: r.resultObj[0],
type: r.resultObj[1],
navigate:r.resultObj[2],
a:"test"
//v-model绑定
},
methods: {
getChild: function () {
this.$data.a = $("#Navigate2").val();
},
}
});
}
//保存文章
function submitForm() {
$("#content").val(UE.getEditor('editor').getContent());
//判断表单字段是否为空
var list = document.getElementsByClassName("required");
for (var i = 0; i < list.length; i++) {
// alert(list[i].value=="");
if (list[i].value == ""||list[i].value == -1) {
alertWarning("表单字段不能为空");
return;
}
}
$.ajax({
type: "POST",
async: true,
url: "${request.contextPath}/admin/saveArticle",
data: $("#commentForm").serialize(),
success: function (result) {
if (result.resultCode == 1) {
var success;
success = jqueryAlert({
'content': "保存成功",
'modal': true,
'contentTextAlign': 'center',
'width': '450px',
'height': '100px',
'animateType': 'linear',
'buttons': {
'确定': function () {
// var a = document.getElementById("ChildNavigate").value;
success.close();
window.location.href = "${request.contextPath}/admin/tosuccess";
}
}
})
} else {
alertWarning("保存失败!");
}
},
error: function () {
alertWarning("保存失败");
}
});
}
var warning;
//弹出窗口函数
function alertWarning(message) {
warning = jqueryAlert({
'content': message,
'modal': true,
'contentTextAlign': 'center',
'width': '450px',
'height': '100px',
'animateType': 'linear',
'buttons': {
'确定': function () {
warning.close();
}
}
})
}
//刷新开始
function refreshStart() {
$("body").mLoading({
text: "正在加载", //加载文字,默认值:加载中...
// icon: "", //加载图标,默认值:一个小型的base64的gif图片
html: false, //设置加载内容是否是html格式,默认值是false
content: "", //忽略icon和text的值,直接在加载框中显示此值
mask: true //是否显示遮罩效果,默认显示
});
}
//刷新结束
function refreshEnd() {
$("body").mLoading("hide");
}
</script>
</html>
*****************之前写好了也编辑页面的跳转*********************
4.将static/ueditor/jsp/config.json 拷贝至resource目录下
5.编写UeditController
package com.tianmaxingkong.demo.controller.admin;
import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Author zhaoxin
* @Email 1272743926@qq.com
* @Description //TODO
* @Date 2019/4/4
**/
@Controller
public class UeditController {
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
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();
}
}
}
6.修改ConfigManage类的getConfigPath()方法
private String getConfigPath () {
//return this.parentPath + File.separator + ConfigManager.configFileName;
/*=========手动修改部分=========*/
try{
//获取classpath下的config.json路径
return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
}catch (URISyntaxException e){
return null;
}
}
7.配置ueditor.config.js 打开ueditor.config.js
将:
, serverUrl: URL + "jsp/controller.jsp"
替换为:
, serverUrl: "/config"
8. 修改BinaryUploader 类,解决其无法获得带字节流的request的问题
打开com.baidu.ueditor.upload.BinaryUploader.java
,修改为:
public class BinaryUploader {
public static final State save(HttpServletRequest request,
Map<String, Object> conf) {
// FileItemStream fileStream = null;
// boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
}
// ServletFileUpload upload = new ServletFileUpload(
// new DiskFileItemFactory());
//
// if ( isAjaxUpload ) {
// upload.setHeaderEncoding( "UTF-8" );
// }
try {
// FileItemIterator iterator = upload.getItemIterator(request);
//
// while (iterator.hasNext()) {
// fileStream = iterator.next();
//
// if (!fileStream.isFormField())
// break;
// fileStream = null;
// }
//
// if (fileStream == null) {
// return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
// }
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
if(multipartFile==null){
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
//String originFileName = fileStream.getName();
String originFileName = multipartFile.getOriginalFilename();
String suffix = FileType.getSuffixByFilename(originFileName);
originFileName = originFileName.substring(0,
originFileName.length() - suffix.length());
savePath = savePath + suffix;
long maxSize = ((Long) conf.get("maxSize")).longValue();
if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}
savePath = PathFormat.parse(savePath, originFileName);
String physicalPath = (String) conf.get("rootPath") + savePath;
//InputStream is = fileStream.openStream();
InputStream is = multipartFile.getInputStream();
State storageState = StorageManager.saveFileByInputStream(is,
physicalPath, maxSize);
is.close();
if (storageState.isSuccess()) {
storageState.putInfo("url", PathFormat.format(savePath));
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}
return storageState;
// } catch (FileUploadException 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);
}
}
9.修改图片上传路径 打开config.json
,在其中增加:
"basePath": "G:/IdeaWork/Personnel_department/src/main/resources/static/",
11.打开ConfigManager.java
在
conf.put( "savePath", savePath );
conf.put( "rootPath", this.rootPath );
上面加一句:
conf.put( "basePath", this.jsonConfig.getString("basePath") );
12.打开BinaryUploader.java
将
String physicalPath = (String) conf.get("rootPath") + savePath;
修改为
String basePath=(String) conf.get("basePath");
String physicalPath = basePath + savePath;
至此 配置成功。