您的位置:首页 > Web前端 > BootStrap

Summernote – 基于 Bootstrap 的文本编辑器

2016-08-31 13:36 507 查看
一:引入相关JS和css
<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!--国际化 -->
<script src="lang/summernote-zh-CN.js"></script>


二:插入编辑器
<div id="summernote">Hello Summernote</div>


三:让编辑器工作
$(document).ready(function() {
$('#summernote').summernote();
});


四:部分API

获取编辑器内容:
$('#summernote').code();


五:图片上传部件

js代码
$(document).ready(function() {
$('#summernote').summernote({
lang: 'zh-CN', // default: 'en-US'
height: 300,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
});

function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "${base}/store/album/uploadImage/${goods.albumId?c}",
cache: false,
contentType: false,
processData: false,
success: function(data) {
editor.insertImage(welEditable, data.url);
}
});
}


服务器代码:
@RequestMapping(value="/album/uploadImage/{albumId}",method= RequestMethod.POST)
@ResponseBody
public Object uploadImage(HttpServletResponse response,HttpServletRequest request,
@RequestParam(value="file", required=false) MultipartFile file,@PathVariable Integer albumId){
Map result_map = new HashMap();
try{
byte[] bytes = file.getBytes();
String uploadDir = request.getSession().getServletContext().getRealPath("/upload");//request.getContextPath()+"/upload";
File dirPath = new File(uploadDir);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
String sep = System.getProperty("file.separator");
String fileName = UUID.randomUUID().toString() + "." + getSuffix(file.getOriginalFilename());
File uploadedFile = new File(uploadDir + sep + fileName);
FileCopyUtils.copy(bytes, uploadedFile);

//上传到又拍云
String filePath = uploadDir + "/" + fileName;
Map<String, Object> map = UpYunUtil.writeFile(fileName, filePath, true);
String url = (String) map.get("detail");
new File(filePath).delete();//上传到又拍云后删除

//保存照片Url到image表
storeService.saveImage(albumId,url);
result_map.put("url",url);
return result_map;
}catch (IOException e){
result_map.put("url","");
return result_map;
}
}


下载所有文档移驾官网:http://summernote.org/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: