0. 添加前端页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; String htmlData=(String)request.getAttribute("htmlData"); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=basePath%>/common/js/jquery-1.7.1.min.js"></script> <link href="<%=basePath%>liger/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath%>common/css/bgcommon.css?1.3" rel="stylesheet" type="text/css" /> <script src="<%=basePath%>liger/lib/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="<%=basePath%>liger/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script> <script src="<%=basePath%>liger/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> <link rel="stylesheet" href="<%=basePath %>kindeditor-4.1.2/plugins/code/prettify.css?1.2" /> <link rel="stylesheet" href="<%=basePath %>kindeditor-4.1.2/themes/default/default.css?1.2" /> <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/kindeditor.js?1.3"></script> <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/lang/zh_CN.js?1.2"></script> <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/plugins/code/prettify.js?1.2"></script> <link rel="stylesheet" href="<%=basePath%>/zTree_v3/css/demo.css" type="text/css"> <link rel="stylesheet" href="<%=basePath%>/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="<%=basePath%>/zTree_v3/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="<%=basePath%>/common/js/bgcommon.js"></script> <style type="text/css"> .l-text-field{ height: 20px; border:none; outline: none; } #title_ul{width: 100%;height: 30px;border-bottom: 1px solid #dbdbdb;margin-top: 10px;margin-bottom: 30px;z-index:0;} #title_ul li.cu_li{border-top: 1px solid red;} #title_ul li{display:block;height: 30px;line-height: 30px;border: 1px solid #dbdbdb;float: left;width:120px;border-bottom: none;cursor: pointer;z-index:99;} .add_gg{height: 30px;line-height: 30px;text-align: center;border: 1px solid #dbdbdb;width:100px;} #edit_table1 table tr td a{padding-left: 8px;cursor: pointer;} #edit_table1 table tr td{padding-top:12px;} #edit_table2 table select{width:150px;} #edit_table2 table tr td{border: 1px;} </style> <script> var editor1; KindEditor.ready(function(K) { editor1 = K.create(‘textarea[name="content1"]‘, { cssPath : ‘<%=basePath %>/kindeditor-4.1.2/plugins/code/prettify.css‘, uploadJson : ‘<%=basePath %>/jsp/upload_json.jsp‘, fileManagerJson : ‘<%=basePath %>/jsp/file_manager_json.jsp‘, allowFileManager : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms[‘example‘].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms[‘example‘].submit(); }); } }); prettyPrint(); }); </script> </head> <body> <div id="toolbar"> <div style="width:99%;margin:auto;" id="edit_table"> <form action="" id="edit_form" method="post" enctype="multipart/form-data"> <input value="${obj.id}" name="id" id="id" type="hidden"/> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr><td width="120" align="right">新闻详情：<font color=red>*</font></td> <td align="left" width="900"> <textarea name="content1" id="content1" cols="100" rows="8" style="width:800px;height:500px;visibility:hidden;"> <%=htmlspecialchars(htmlData)%> </textarea> <input type="hidden" id="e_content" name="e_content"> </td> </tr> <tr> <td style="border:none"> </td> <td style="padding:5px 0px 5px 5px;border:none"> <a href="javascript:update()" class="a_btn space blue">保 存</a> <a href="javascript:location.href=‘<%=basePath%>/appNews/news_list‘;" class="a_btn space">返 回</a> </td></tr> </table> </form> </div> </div> <div id="menuContent" class="menuContent" style="display:none; position: absolute;"> <ul id="treeDemo2" class="ztree" style="margin-top:0; width:160px;"></ul> </div> </body> <script type="text/javascript"> function check_file(e,file_type) { var str=e.value.substr(e.value.length-4,e.value.length).toLowerCase(); if(str!=".jpg") { alert(‘文件必须为 jpg、png或gif格式！‘); e.value=""; e.outerHTML=e.outerHTML; //清空 } } function update() { var html = editor1.html(); html = html.replace(/&/g, "%26"); html = html.replace(/‘/g, "%27"); html = html.replace(/</g, "%48"); html = html.replace(/>/g, "%50"); html = html.replace(/%/g, "%25"); $("#e_content").val(html); var edit_form = document.getElementById("edit_form"); var save_url="appNews/save"; var e_id = document.getElementById("id"); if(e_id.value!=""){ save_url="appNews/update"; } edit_form.action=save_url; edit_form.submit(); } </script> </html> <%! private String htmlspecialchars(String str) { str = str.replaceAll("%25", "%"); str = str.replaceAll("%26", "&"); str = str.replaceAll("%27", "‘"); str = str.replaceAll("%48", "<"); str = str.replaceAll("%50", ">"); return str; } %> <script type="text/javascript"> function chow_div(e,num){ $(e).siblings().removeClass(‘cu_li‘); $(e).addClass(‘cu_li‘); if(num==1){ $(‘#edit_table‘).show(); $(‘#edit_table1‘).hide(); $(‘#edit_table2‘).hide(); }else if(num==2){ $(‘#edit_table‘).hide(); $(‘#edit_table1‘).show(); $(‘#edit_table2‘).hide(); }else{ $(‘#edit_table‘).hide(); $(‘#edit_table1‘).hide(); $(‘#edit_table2‘).show(); } } </script> <script> function test(e){ var name=$(e).prev("input").attr("name"); var str=‘<div style="padding-top:5px;"><span style="visibility: hidden;">规格名称：</span><input name="‘+name+‘"><a onclick="del_parent(this)">-</a></div>‘; $(e).parent().append(str); } function del_parent(e){ $(e).parent().remove(); } </script> <SCRIPT type="text/javascript"> var setting = { data: { simpleData: { enable: true } }, callback: { onClick: onClick } }; var setting2 = { data: { simpleData: { enable: true } }, callback: { onClick: onClick2 } }; function beforeClick(treeId, treeNode) { return check; } function onClick(e, treeId, treeNode) { getdata(treeNode.id,treeNode.getParentNode().name) return false; } function onClick2(e, treeId, treeNode) { $("#category_id").val(treeNode.id) $("#parent_name").val(treeNode.name); hideMenu(); return false; } function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { hideMenu(); } } function check_file(e,file_type) { var i=0; var file_index=-1;//获取文本域下标 var files; var str=e.value.substr(e.value.length-4,e.value.length); if(str!=".jpg") { alert(‘文件格式必须为 .jpg 格式‘); e.value=""; e.outerHTML=e.outerHTML; //清空 } } </SCRIPT>
1.添加并保存至阿里云 ，后台控制器
//添加 @RequestMapping(value ="/save",produces="text/html;charset=UTF-8") public String tc_info_save( News news,String e_content, @RequestParam("myfile1") MultipartFile myfile1, HttpSession session, HttpServletRequest request ){ BGUser user=(BGUser)session.getAttribute("bguser"); if(user==null){ return "99"; } String id=""; //UUID uuid = UUID.randomUUID(); id = UUID.randomUUID().toString(); news.setId(id); news.setNews_img(id+".jpg"); // -------aliyun上传star------- // endpoint以杭州为例，其它region请按实际情况填写。 String endpoint = "xxxx"; // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。 String accessKeyId = "xxxxxx"; String accessKeySecret ="xxxxxxx"; // 创建OSSClient实例。 //OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); OSSClient ossClient = new OSSClient(endpoint, "xxxxxx", "xxxxxx"); // 上传文件流。 InputStream inputStream=null; try { if (!myfile1.isEmpty()) { inputStream = myfile1.getInputStream(); } } catch (FileNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } String img_url="hlww/news/news_img/"+news.getNews_img(); ossClient.putObject("hlww",img_url, inputStream); InputStream byteArrayInputStream=null; byteArrayInputStream = new ByteArrayInputStream(e_content.getBytes()); String body_url="xxxxx/"+id+".txt"; ossClient.putObject("hlww",body_url,byteArrayInputStream); // 关闭ossClient。 ossClient.shutdown(); // -------aliyun上传star------- try { inputStream.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } try { byteArrayInputStream.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } //设置id String r="-1"; r=this.newsService.insert(news); System.out.println("r="+r); request.setAttribute("result", r); if (Integer.parseInt(r)>0) { MyNewThread myNewThread = new MyNewThread( news); myNewThread.start(); } return "bg/base/news_save"; }
2.从阿里云服务器读取后台：
@RequestMapping(value ="/edit/{id}",produces="text/html;charset=UTF-8") public String tc_info_edit(@PathVariable("id") String id,Model mod,HttpServletRequest request,HttpSession session){ if(id==null) id=""; if(id.equals("a1")) id=""; Map obj=null; String htmlData=""; if(!id.equals("")){ obj=this.newsService.getMapBySql("select * from t_news_list where id=‘"+id+"‘"); String content=""; BufferedInputStream in=null; try { URL url = new URL("https://xxx.oss-cn-shanghai.aliyuncs.com/xxx/"+id+".txt"); in = new BufferedInputStream(url.openStream()); StringBuffer out = new StringBuffer(); byte[] b = new byte[4096]; for(int n;(n=in.read(b))!=-1;){ out.append(new String(b,0,n)); } content= out.toString(); }catch (FileNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (MalformedURLException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } try { in.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } ReadFile r=new ReadFile(); //String content=r.read(file); htmlData = content; } mod.addAttribute("obj",obj); mod.addAttribute("htmlData",htmlData); String goods_id="1"; return "bg/base/news_edit"; } 3. 前端jsp显示页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../../wx/main/head.jsp"></jsp:include>
<style>
html,
body {
margin: 0px;
padding: 0px;
background-color: #efeff4;
}
.ui-login-form {
margin-top: 20px;
padding: 0px 15px;
}
.mui-btn-block {
padding: 10px 0;
}
.mui-content-padded {
margin: 25px 15px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.mui-input-row {
background-color: #fff !important;
}
.mui-input-row {
border-bottom: 1px solid #E2E2E2;
}
.mui-content-padded a, .mui-content-padded a:hover{
color: #f00;
}
</style>
<style type="text/css">
select {
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") !important;
background-repeat: no-repeat !important;
background-position: 97% center !important;
padding: 0.5rem;
font-size: 0.875rem;
border-radius: 0px;
height: 2.3125rem;
}
.mui-content{
padding:5px;
}
.mui-content p{
color:#000;
}
</style>
</head>
<body>
<div class="mui-content" style="background:#fff">
${htmlData }
</div>
</body>
</html>