springboot整合H+,基于summernote的富文本编辑器图片上传
2018-01-28 14:40
1026 查看
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码.
首先看前台页面:
需要注意的是summernote的默认图片上传是base64编码所以我么要重写上传方法,还有一个特别关键的问题,要过滤富文本里的内容,不然直接从word粘贴过来的内容无法保存,还有中间夹杂%也无法保存或保存数据或数据丢失的问题,</span>
<!DOCTYPE html>
<html>
<!-- Mirrored from www.zi-han.net/theme/hplus/form_editors.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:35 GMT -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 富文本编辑器</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico"> <link href="../hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="../hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="../hplus/css/animate.min.css" rel="stylesheet">
<link href="../hplus/css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="../hplus/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<link href="../hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
内容标题: <input id="title_text" type="text"> *
</div>
<div class="ibox-content no-padding">
<button id="save" class="btn btn-primary btn-xs" onclick="save()" type="button">保存</button>
<button id="btn" class="btn btn-primary btn-xs" type="button" onclick="preview()">预览</button>
<div class="summernote">
</div>
</div>
</div>
</div>
</div>
<!--预览-->
<div id="preview" style="display: none">
<button class="btnfan" onclick="hide()">返回</button>
<div class="preview_box">
<div class="preview_box_last" id="preview_box_last">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
</div>
</div>
</div>
</div>
<script src="../hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="../hplus/js/bootstrap.min.js?v=3.3.6"></script>
<script src="../hplus/js/content.min.js?v=1.0.0"></script>
<script src="../hplus/js/plugins/summernote/summernote.min.js"></script>
<script src="../hplus/js/plugins/summernote/summernote-zh-CN.js"></script>
<script>
window.onload=function(){
getId()
}
var id=localStorage.getItem("id");
console.log(id);
var arr=[];
$(document).ready(function(){
$(".summernote").summernote({lang:"zh-CN",
callbacks: {
onImageUpload: function(files) {
// 上传图片到服务器并且插入图片到编辑框
//alert("aaa");
sendFile(files[0])
},
onPaste: function(ne) {
var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text/plain');
// ne.preventDefault();
ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
// Firefox fix
setTimeout(function () {
document.execCommand("insertText", false, bufferText);
}, 10);
}
}
})
})
function getId(){
if(id==''){
}else{
$.ajax({
type:"get",
url:'/content/service/byId?id='+id+'',
cache:false,
async:false, //是否异步
success:function(data) {
console.log(typeof data);
document.getElementById("title_text").value=data.title;
console.log(data.title);
var markupStr = ''+data.content+'';
$('.summernote').summernote('code', markupStr);
localStorage.removeItem('id');
},
})
}
}
; var edit=function(){$("#eg").addClass("no-padding");
$(".click2edit").summernote({lang:"zh-CN",focus:true})};
function sendFile(file){
var filename=false;
filename=file['name'];
filename=false;
if(!filename){
$(".note-alarm").remove();
}
data=new FormData();
data.append("file",file);
data.append("key",filename);
console.log(file);
$.ajax({
data:data,
type:"post",
url:'/content/upload',
cache:false,
dataType:'json',
contentType:false,
processData:false,
success:function (data) {
// console.log(typeof data );
data=JSON.parse(data)
//console.log(typeof data );
console.log(data.path);
$('.summernote').summernote('editor.insertImage', data.path)
arr.push(data.path);
},
error:function () {
alert("上传失败");
}
})
}
function save() {
//var aHTML=$(".summernote").code();
//console.log(aHTML)
var aa=$('.summernote').summernote('code')
console.log(typeof aa)
var title=document.getElementById("title_text").value;
if(id==""||id==null||id=="null"){
if(title==""){
alert("请输入标题");
}else{
var str=''
var _str=''
str=''+aa+''
//summernote会把空格以后或者带%的所有内容自动去掉，所以这里替换所有空格和转%
var st= encodeURIComponent(str);
$.ajax({
type:'post', //方式
url:'/content/service',
data:"content="+st+"&title="+title,
async:false, //是否异步
success:function(data) {
alert("成功");
window.location.href="/content"
},
error:function () {
alert("上传失败");
}
})
}
}else{
if(title==""){
alert("请输入标题");
}else{
var str=''
var _str=''
str=''+aa+''
//summernote会把空格以后或者带%的所有内容自动去掉，所以这里替换所有空格和转%
var st= encodeURIComponent(str);
$.ajax({
type:'put', //方式
url:'/content/service',
data:"content="+st+"&title="+title+"&id="+id,
async:false, //是否异步
success:function(data) {
alert("成功");
console.log(data);
window.location.href="/content"
},
error:function () {
// console.log(id2);
alert("上传失败2");
}
})
}
}
}
function preview(){
var aa=$('.summernote').summernote('code');
document.getElementById("preview_box_last").innerHTML=aa;
document.getElementById('preview').style.display="block";
};
function hide() {
document.getElementById('preview').style.display="none";
document.getElementById("preview_box_last").innerHTML="";
}
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html> 这是页面效果:
下面是后台Controller代码,在后台有两个地方很重要,页很容易出错
/***富文本图片上传保存*@paramrequest*@return*/@RequestMapping(value = "/upload",method = RequestMethod.POST)@ResponseBodypublicString Content( HttpServletRequest request) {//创建map集合Map<String,Object> map=new HashMap<String,Object>();try {// 转换成多部分requestMultipartHttpServletRequest multipartRequest=((MultipartHttpServletRequest) request);//获得上传的所有文件名Iterator<String> fileNameIter = multipartRequest.getFileNames();//进行循环遍历while (fileNameIter.hasNext()){//根据文件名获取文件MultipartFile file =multipartRequest.getFile(fileNameIter.next());//若文件不为nullif(file!=null){//获取上传时的文件名String myFilename=file.getOriginalFilename();System.out.println("上传时的文件名:"+myFilename);//去除空格if(myFilename.trim()!=""){//获得文件名String filename=file.getOriginalFilename();//截取文件名String fileBaseName=filename.substring(0,filename.lastIndexOf("."));//截取文件后缀String fileExt=filename.substring(filename.lastIndexOf(".")+1).toLowerCase();//时间格式化对象SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMddHHmmss");//生成时间戳String newFilename=simpleDateFormat.format(new Date());//生成新的文件名String filenames=newFilename+new Random().nextInt(1000)+"."+fileExt;//获得保存文件路径String filePath=request.getSession().getServletContext().getRealPath("/")+"\\upload\\"+filenames;//部署保存路径//String filePath=imageHtmlLocation+filenames;System.out.println("保存的路径:"+filePath);//保存文件File targetFile = new File(filePath);if(!targetFile.exists()){//先得到文件的上级目录，并创建上级目录，在创建文件targetFile.getParentFile().mkdir();try {//创建文件targetFile.createNewFile();} catch (IOException e) {e.printStackTrace();}}//上传文件file.transferTo(targetFile);//获得工程的相对路径String saveUrl ="http://127.0.0.1:8060/upload/"+filenames;//部署访问路径//String saveUrl =fileuploadPrefix+imageHtmlUrl+filenames;System.out.println("相对路径:"+saveUrl);//将文件保存的相对路径返回页面map.put("path",saveUrl);}}}//保存添加信息request.setAttribute("msg", "true");return JSON.toJSONString(map);} catch (Exception e) {e.printStackTrace();//保存失败request.setAttribute("msg", "false");return null;}总结一下:这样基本上就可以实现图片的保存了,因为基于springboot每次重新运行,tomcat的运行路径就会发生改变,所以当重新启动会发现前面存储的文件通过http访问不到了,所以最终部署要在 application.properties中进行映射配置,比如
#传图提问保存图片路径question.image.location=G:/home/web/static/fileupload/image/questionquestion.image.url=/fileupload/image/question
后台代码中进行引入就可以实现路径的映射</span>
//引入图片存储映射路径@Value("${image.html.location}")private StringimageHtmlLocation;//引入图片访问映射路径@Value("${image.html.url}")private StringimageHtmlUrl;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于SpringBoot实现图片上传与显示
- 基于spring-boot的文件上传和下载（包括图片的压缩）--第一篇（Java代码）
- 使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
- springBoot整合ftp上传图片功能
- 基于spring-boot的web应用，ckeditor上传文件图片文件
- Spring+SpringMVC+Mybatis整合百度富文本编辑器Ueditor，上传图片到阿里云OSS对象存储。
- 基于spring 的ssi-uploader的多图片上传
- spring boot 图片上传后的图片读取路径在win与linux环境配置的差别
- 基于SpringBoot上传任意文件功能的实现
- SpringMVC + summernote 删除图片时移除本地资源文件（3）
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能
- spring boot 、springMVC环境集成百度ueditor富文本编辑器，使用七牛云存储图片
- S2SH整合以及图片上传（1）之spring搭建
- 详解js插件ajaxupload实现图片上传（适用springboot）
- 解除spring-boot上传图片大小的限制
- summernote图片上传功能保存到服务器指定文件夹+php代码+java方法
- summernote处理上传图片到自己的服务器
- 使用spring boot 整合spring jpa做基于restful风格的增删改查(maven ,mysql)
- gradle+spring-boot+mybatis(基于xml)+mysql 整合
- spring boot实现上传图片并在页面上显示