前端页面 (前端页面主要注意需要引入相关的js文件,我会在下面附图片 你对应相对自己项目的地址位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="../css/custom.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../css/font.css">
<link rel="stylesheet" href="../css/xadmin.css">
<link rel="stylesheet" href="../css/inputTags.css">
<link rel="stylesheet" href="../css/layui.css">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/custom.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="../css/zTreeStyle.css">
<link rel="stylesheet" href="../css/treeselect.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
<style type="text/css">
#editor-container {
height: 600px;
}
</style>
</head>
<body style="background: #ffffff">
<div class="">
<div style="text-align:left;">
<div class="x_content">
<form class="form-horizontal form-label-left"
style="margin-left: -90px">
<div class="form-group">
<label class="control-label col-md-2 col-xs-2" for="last-name">新闻标题:<span
class="required">*</span>
</label>
<div class="col-md-4 col-xs-4">
<input type="text" id="infoTitle" name="infoTitle"
required="required" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-xs-2" for="last-name">是否公示:<span
class="required">*</span>
</label>
<div class="col-md-4 col-xs-4">
<p>
<input type="radio" class="flat" name="Publish" id="isPublish"
value="1" checked="" required> 是 <input type="radio"
class="flat" name="Publish" id="isPublish" value="0">否
</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-xs-2" for="last-name">新闻内容:<span
class="required">*</span>
</label>
<div class="col-md-10 col-xs-10">
<div class="" style="background: #ffffff">
<div class="x_content">
<div id="alerts"></div>
<!-- 文本框的infocontent的内容 就是控制富文本的-->
<textarea name="content" style="width: 99%; height: 400px; visibility: hidden;"></textarea>
<br>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- <div class="ln_solid"></div> -->
<div class="form-group">
<div class="col-md-12 col-xs-12" style="text-align: center">
<button type="button" onclick="cancleFunction()"
class="btn btn-primary" style="margin-left: -5px;">取消</button>
<button type="submit" onclick="submitFunction()"
class="btn btn-primary" style="margin-left: 41px;">确定</button>
</div>
</div>
</div>
</div>
<div class="main_container" style="background-color: #ffffff">
<!-- page content -->
<div class="right_col" role="main">
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
</div>
<style>
.col-md-7 {
height: 28px;
margin-top: 4px;
}
</style>
<script type="text/javascript" src="../libs/layui/layui.js"
charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/inputTags.js"></script>
<script type="text/javascript" src="../js/xadmin.js"></script>
<script type="text/javascript" src="../js/global.js"></script>
<script type="text/javascript" src="../js/custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<!-- jQuery -->
<!-- jQuery -->
<script type="text/javascript">
function cancleFunction() {
//关闭
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
function submitFunction() {
var layer = layui.layer;
//提交
// 新闻标题校验
var isPublish = $('input:radio:checked').val();
var planProjectName = $("#infoTitle").val();
if (null == planProjectName || '' == planProjectName) {
layer.msg('<a style="color:red">请输入新闻标题</a>', {
icon : 2
});
return false;
}
/** 新闻内容不能为空*/
/* var infoContent=$("#infoContent").html(); */
var infoContent = editor.html();
if (null == infoContent || '' == infoContent) {
layer.msg('<a style="color:red">请输入新闻内容</a>', {
icon : 2
});
return false;
}
获取分类
var data = {
"infoTitle" : planProjectName,
"isPublish" : isPublish,
"infoContent" : infoContent,
};
addNews(data);
}
function addNews(data) {
$.ajax({
type : "POST",
dataType : "json",
url : serverUrl.url + serverUrl.addInfo,
data : data,
cache : false,
success : function(result) {
if (result.returnCode == 0) {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
//parent.showMsg(result.reason);
//window.parent.location.reload();
//parent.layui.table.reload('table');
layer.msg('添加成功', {
icon : 0
});
parent.getData();
} else {
//parent.showMsg(result.reason);
layer.msg('<a style="color:red">' + result.reason
+ '</a>', {
icon : 2
});
}
},
error : function() {
layer.msg('<a style="color:red">' + '修改新闻失败!' + '</a>', {
icon : 2
});
}
});
}
layui.use([ 'inputTags' ], function() {
var inputTags = layui.inputTags;
inputTags.render({
elem : '#trainMonths',//定义输入框input对象
content : [],//默认标签
aldaBtn : false,//是否开启获取所有数据的按钮
done : function(value) { //回车后的回调
}
})
})
</script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', { //跟上面的name 想对应即可
allowFileManager : true,
uploadJson : "/uap/sxykt/rest/info/upload", //上传文件的接口
allowImageRemote : false,
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', '|', 'about'
] //设置需要的功能按钮 如果全都要 就把这个项目删除
});
});
</script>
</body>
</html>
后端接口
// 文件上传
@RequestMapping("/upload")
@ResponseBody
public Map<String, Object> upload(@RequestParam("imgFile") MultipartFile imgFile, HttpServletRequest req)
throws IllegalStateException, IOException {
Map<String, Object> map = new HashMap<String, Object>();
// 判断文件是否为空,空则返回失败页面
if (imgFile.isEmpty()) {
map.put("url", "");
map.put("error", 1);
return map;
}
// 获取文件存储路径(绝对路径) //这里写 自己的项目地址 可以打印出来看看
// String path = req.getServletContext().getRealPath("/upload");
String path = System.getProperty("catalina.home") + "/webapps/" + FileConfigUtil.SHOW_PATH;
// 获取原文件名
String fileName = imgFile.getOriginalFilename();
// 创建文件实例
File filePath = new File(path, fileName);
// 如果文件目录不存在,创建目录
if (!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
// 写入文件
imgFile.transferTo(filePath);
map.put("url", FileConfigUtil.SHOW_PATH + fileName);
map.put("error", 0);
return map;
}