Summernote – 基于 Bootstrap 的文本编辑器

一：引入相关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,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/