Summernote – 基于 Bootstrap 的文本编辑器
2016-08-31 13:36
507 查看
一:引入相关JS和css
二:插入编辑器
三:让编辑器工作
四:部分API
获取编辑器内容:
五:图片上传部件
js代码
服务器代码:
下载所有文档移驾官网:http://summernote.org/
<!-- 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/
相关文章推荐
- 基于jquery的bootstrap在线文本编辑器插件Summernote (转)
- Summernote – 基于 Bootstrap 的文本编辑器
- 基于BootStrap的文本编辑器组件Summernote
- 基于jquery的bootstrap在线文本编辑器插件Summernote
- Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
- 基于jquery的bootstrap在线文本编辑器插件Summernote (转)
- 基于jquery的bootstrap在线文本编辑器插件Summernote
- Summernote – 基于 Bootstrap 的文本编辑器
- 基于bootstrap的编辑器summernote学习一
- Jquery的bootstrap在线文本编辑器插件Summernote
- 基于jQuery和bootstrap的富文本编辑插件—summernote
- 基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作
- springboot整合H+,基于summernote的富文本编辑器图片上传
- Summernote – 基于 Bootstrap 的文本编辑器
- Bootstrap 可视化HTML编辑器,summernote
- bootstrap插件summernote 编辑器 的使用
- bootstrap插件summernote 的使用
- 使用bootstrap中的summernote并使用七牛云上图片
- django模板中插入summernote工具(bootstraphtml编辑器)
- 超漂亮的Bootstrap 富文本编辑器summernote