bootstrap summernote富文本编辑器图片上传干货分享

个人技术网站欢迎关注

今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器。文档各大大牛已经整理出来了但是图片上传到服务器这块比较杂大部分都是说上传到服务器的图片格式是base64的，但是我使用base64接收的时候看了下控制台竟然是二进制上传、、、lol 上传方法白写了,至此在这里做个记录方便自己谨记和有需要的人使用

第一步加载富文本编辑器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编辑器</title>
<link href="/css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
<link href="/summernote/summernote.css" rel="stylesheet" th:href="@{/summernote/summernote.css}"/>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/summernote/summernote.js" th:src="@{/summernote/summernote.js}"></script>
<script src="/summernote/lang/summernote-zh-CN.js" th:src="@{/summernote/lang/summernote-zh-CN.js}"></script>    <!-- 中文-->
<style>.m{ width: 500px; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/var ctxPath = /*[[@{/}]]*/ '';/*]]>*/console.info(ctxPath);
</script>
<script>
$(document).ready(function() {$('.summernote').summernote({  height: 500,tabsize: 2,lang: 'zh-CN',callbacks: {  onImageUpload: function(files) { //the onImageUpload API  console.log("图片上传"+files[0]);img = sendFile(files[0]);  }  }  });
});
function sendFile(file) {  data = new FormData();  data.append("file", file);$.ajax({  data: data,  type: "POST",  url: ctxPath+"/common/sysFile/upload",cache: false,  contentType: false,  processData: false,  success: function(data) {console.log(data);$(".summernote").summernote('insertImage', ctxPath+data.fileName, 'image name'); // the insertImage API}  });
}
</script>
</head><body><div class="m">       <div class="summernote">summernote 1</div></div>
</body>
</html>

这一步网上的文档很详细一些路径请自己根据项目需要配置

2 服务端上传接口

@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("file") MultipartFile[] file, @RequestParam(value = "type", defaultValue = "0") String type, HttpServletRequest request) throws IOException {if ("test".equals(getUsername())) {return R.error(1, "演示系统不允许修改,完整体验请部署程序");}type = type==null||type==""?type="2":type;LOGGER.info(">>>>>>>>>>>>>>>>>>>>> {}", type);Date createTime = new Date();if (null != file && file.length > 0) {//遍历并保存文件for (MultipartFile files : file) {if (file != null) {//取得当前上传文件的文件名称String fileName = files.getOriginalFilename();//如果名称不为“”,说明该文件存在，否则说明该文件不存在if (type.equals("1")) {//OSS方式上传文件String suffix = files.getOriginalFilename().substring(files.getOriginalFilename().lastIndexOf("."));String url = ossService.build().uploadSuffix(files.getBytes(), suffix);//保存文件信息fileName = FileUtil.renameToUUID(fileName);SysFile sysFile = new SysFile(FileType.fileType(fileName), url, new Date(), getUserId());if (sysFileService.save(sysFile) > 0) {LOGGER.info(">>>>>>>>>>>>>OSS上传图片路径  {}", url);return R.ok().put("fileName", sysFile.getUrl());}} else {//本地上传图片方式fileName = FileUtil.renameToUUID(fileName);SysFile sysFile = new SysFile(FileType.fileType(fileName), "/files/" + fileName, new Date(), getUserId());try {FileUtil.uploadFile(files.getBytes(), bootdoConfig.getUploadPath(), fileName);} catch (Exception e) {return R.error();}if (sysFileService.save(sysFile) > 0) {LOGGER.info(">>>>>>>>>>>>>本地上传图片路径  {}", "/files/" + fileName);return R.ok().put("fileName", sysFile.getUrl());}}}}} else {return R.error("上传文件不能为空");}return R.ok();
}

这一步就是个简单的二进制上传接口有需要的根据自己项目需要更改

最后来一张debug效果图

bootstrap summernote富文本编辑器图片上传干货分享相关推荐

富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决问题原因我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
SSM+KindEditor实现富文本编辑器图片上传
场景 KindEitor官方文档: http://kindeditor.net/demo.php 实现效果下载Kindeditor 下载地址: http://kindeditor.net/down ...
WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...

bootstrap summernote富文本编辑器图片上传干货分享

bootstrap summernote富文本编辑器图片上传干货分享相关推荐

最新文章

热门文章