JS部分:
$('.summernote').summernote({
height: 200,//高度
tabsize: 2,//页面上的summernote编辑框的个数
lang: 'zh-CN',//语言
callbacks:{//回调函数,重写onImageUpload方法
onImageUpload: function(files, editor, welEditable) {
sendFile(this,files[0],editor,welEditable);
}
}
});
function sendFile(val,files,editor,welEditable) {
data = new FormData();
data.append("files", files);
$.ajax({
data: data,
dataType: 'json',
type: "POST",
url: "后台url",
cache: false,
contentType: false,
processData: false,
responseType: "json",
success: function(data) {
$(val).summernote('editor.insertImage', data.path);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
} springmvc后台:
@RequestMapping(value = "ajaxUploadFile",produces="application/json;charset=UTF-8")
@ResponseBody
public void ajaxUploadFile(@RequestParam("files") CommonsMultipartFile myfiles, HttpServletRequest request,HttpServletResponse response) { int size = 0;
String fileLogicName = "";
PageData pageData = new PageData();
UUID uuid = UUID.randomUUID();
String[] fileNames = myfiles.getOriginalFilename().split("\\.");
String suffix = fileNames[1];
String fileName = uuid.toString().replace("-", ""); // 文件重命名
if (fileNames.length >= 2) {
fileName += "." + fileNames[1];
} String relPath = FilePathUtil.getUploadTempPath(request) + fileName;
String filePath = FilePathUtil.getFileRootPath(request) + relPath;// 文件保存的实际路径
File localFile = new File(filePath);
if (!localFile.getParentFile().exists()) {
localFile.getParentFile().mkdirs();
} try {
size = myfiles.getBytes().length;
fileLogicName = myfiles.getOriginalFilename();
myfiles.transferTo(localFile); // 保存文件
} catch (IOException e) {
pageData.setResult(2);
pageData.setDesc("上传文件失败");
logger.error("上传文件失败", e);
}
relPath = relPath.replace("\\", "/").replace("//", "/"); pageData.setResult(1);
pageData.setDesc("文件添加成功!");
relPath = relPath.replace("\\", "/").replace("//", "/");
FileInfo fileInfo = new FileInfo();
fileInfo.setFileSize(size);
fileInfo.setFileName(fileName);
fileInfo.setFilePath(relPath);
fileInfo.setSuffix(suffix);
fileInfo.setFullFileUrl(relPath);
fileInfo.setFileLogicName(fileLogicName);
StringBuffer stringBuffer = new StringBuffer();
stringBuffer.append("{");
stringBuffer.append("\"result\"" + ":" + "\"" + pageData.getResult() + "\",");
stringBuffer.append("\"desc\"" + ":" + "\"" + pageData.getDesc() + "\",");
stringBuffer.append("\"fileSize\"" + ":" + "\"" + fileInfo.getFileSize() + "\",");
stringBuffer.append("\"fileName\"" + ":" + "\"" + fileInfo.getFileName() + "\",");
stringBuffer.append("\"filePath\"" + ":" + "\"" + fileInfo.getFilePath() + "\",");
stringBuffer.append("\"suffix\"" + ":" + "\"" + fileInfo.getSuffix() + "\",");
stringBuffer.append("\"fullFileUrl\"" + ":" + "\"" + fileInfo.getFullFileUrl() + "\",");
stringBuffer.append("\"fileLogicName\"" + ":" + "\"" + fileInfo.getFileLogicName() + "\"");
stringBuffer.append("}");
try {
//response.setContentType("text/javascript");
response.setContentType("text/html; charset=utf-8");
response.getWriter().print(stringBuffer.toString());
} catch (IOException e) { }
} FileInfo实体类
package com.cec.test;
public class FileInfo { private Integer fileSize; private String fileName; private String filePath; private String suffix; private String fullFileUrl; private String fileLogicName; public Integer getFileSize() {
return fileSize;
} public void setFileSize(Integer fileSize) {
this.fileSize = fileSize;
} public String getFileName() {
return fileName;
} public void setFileName(String fileName) {
this.fileName = fileName;
} public String getFilePath() {
return filePath;
} public void setFilePath(String filePath) {
this.filePath = filePath;
} public String getSuffix() {
return suffix;
} public void setSuffix(String suffix) {
this.suffix = suffix;
} public String getFullFileUrl() {
return fullFileUrl;
} public void setFullFileUrl(String fullFileUrl) {
this.fullFileUrl = fullFileUrl;
} public String getFileLogicName() {
return fileLogicName;
} public void setFileLogicName(String fileLogicName) {
this.fileLogicName = fileLogicName;
}
} FilePathUtil工具类
public static String  getUploadTempPath(HttpServletRequest request){

    String currentDateStr = DateUtil.sdfDays.format(new Date());
StringBuffer downloadPath = new StringBuffer();
downloadPath.append( File.separator).append(FILE_UPLOAD_TEMP_PATH)
.append(File.separator).append(currentDateStr)
.append(File.separator);
// 解决掉前台jsp展示的时候出现 转义字符问题
String filepath = downloadPath.toString().replace("\\", "/").replace("//","/"); return filepath;
}
public static String getRelPath(HttpServletRequest request, String path){
String filepath = new StringBuffer (getFileRootPath(request)).append(path).toString();
filepath = filepath.toString().replace("\\", "/").replace("//","/");
File dir = new File(filepath);
if (!dir.exists()) {
boolean makeSucess = dir.mkdirs();
if(!makeSucess){
logger.error("创建文件目录失败:" + filepath);
}
}
return filepath;
}
//PageDate类 
//用于后台向前台响应ajax请求返回的对象
@Component
public class PageData {
private int result;
private Map<Object,Object> resultMap;
private String desc; public int getResult() {
return result;
} public void setResult(int result) {
this.result = result;
} public Map<Object,Object> getResultMap() { //统一分配资源
if(resultMap == null){
resultMap = new HashMap<Object,Object>();
} return resultMap;
} public void setResultMap(Map resultMap) {
this.resultMap = resultMap;
} public String getDesc() {
return desc;
} public void setDesc(String desc) {
this.desc = desc;
}
}
展示:


//UUID类可上网百度获得,工作之后初次使用summernote的使用经验。

场景:公司项目是一个页面上有两个富文本编辑框,和一个保存按钮
解决思路:在用户点击图片按钮,上传图片的时候,调用回调函数,将图片通过FormData对象传到后台,后台将图片暂时保存到临时图片文件夹,返回临时图片地址。
前台接收到图片地址之后,将图片插入到富文本编辑框内。当用户点击保存时,将临时文件夹中的图片保存到真实图片保存目录下(这样做的目的是为了解决维护人员不会把临时文件删除掉,看个人需求)。
通过summernote('code')获取文本框内的内容,通过ajax传到后台,后台接收到参数之后,使用正则表达式替换掉临时文件夹的目录,最终返回真实图片保存目录,将真实图片保存目录保存到数据库。 //备注:解决思路中的保存步骤代码在此处没有展示。 总结:思路很重要,先理清思路,再动手不迟!

												

使用summernote编辑器上传图片,重写onImageUpload的更多相关文章

  1. 使用Ueditor编辑器上传图片总结;

    今天使用Ueditor编辑器上传图片一直出问题,在网上找了多种方法,最后总结如下: Ueditor编辑器是百度开发的编辑器,要在jsp页面添加Ueditor编辑器,需要以下几步: (1)到 http: ...

  2. 富文本编辑器上传图片需要配置js,后台代码

    富文本编辑器上传图片需要配置js,后台代码

  3. vue问题四:富文本编辑器上传图片

    vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

  4. tinymce 编辑器 上传图片

    tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...

  5. eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】

    做了一个多版本的网站,后台用的编辑器是eWebeditor,NET版,后面发现上传图片或者文件之后,路径错误无法显示,必须手工修改才行.. 为了更清楚的说明问题,我下面会说的比较详细,首先是网站文件框 ...

  6. 在linux下使用百度ueditor编辑器上传图片

    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...

  7. xheditor编辑器上传图片

    之前在用csdn的时候,觉得他们家的编辑器挺好用,精美,简洁,大方,功能强大.最近自己的项目也要用到编辑器,我就想起了xheditor. 好多大网站都用到它~好棒! 我把xheditor用于文章模块, ...

  8. kindeditor编辑器上传图片

    使用的是asp.net MVC 上传图片. 1.下载Kindeditor的对应的包 2.html页面 @{ Layout = null; } <!DOCTYPE html> <htm ...

  9. C# Asp.net 修改Ueditor编辑器上传图片保存路径

    默认情况下Ueditor图片上传的保存路径是在/ueditor/net/upload/目录下,(如:http://localhost/ueditor/net/upload/123.png), 但是有时 ...

随机推荐

  1. Makefile的使用

    Makefile 使用 一.实验说明 课程说明 在先前的课程中,我们已经学习了 gcc 和 gdb 的使用.本节课程中,我们将介绍 Makefile 的使用.Makefile带来的好处就是--&quo ...

  2. String的split(String regex, int limit)方法小结

    split(String regex, int limit)方法,头一个参数String regex表示字符串分割的模式,包括分隔符和正则表达式:但是第二个参数limit比较迷糊人,api中这样解释: ...

  3. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  4. EIP权限工作流升级说明-2019/3/5

    首页增加待办事项直接处理按钮 2,新增处理历史记录

  5. Gazebo学习随记5 杂记

    模拟建筑编辑器 将卫星图导入世界,方便空中机器人模拟 录像和回放 记录筛选 给关节添加力/扭矩  一开始不知道哪里出现了偏差以一动不动,重启就好了 HDF5数据集 代码内省 模型插件   !!!我终于 ...

  6. 等和的分隔子集(DP)

    晓萌希望将1到N的连续整数组成的集合划分成两个子集合,且保证每个集合的数字和是相等.例如,对于N=3,对应的集合{1,2,3}能被划分成{3} 和 {1,2}两个子集合. 这两个子集合中元素分别的和是 ...

  7. JBOSS AS 性能调整优化

    1 减少日志的输出量 *\jboss-4.2.3.GA\server\default\conf\jboss-log4j.xml 根据不同的日志级别:一共有5个等级,越往下输出的东西越详细.一般没什么特 ...

  8. [Swift实际操作]九、完整实例-(6)创建App欢迎界面

    本文创建一个位于导航控制器之内的欢迎页面,该页面主要用来向用户简要介绍产品的功能.以及提供主要功能的入口. 首先选择自定义视图文件夹[CustomViews],需要在该文件夹下,导入一款第三方类库.该 ...

  9. 解释器模式Interpreter详解

    原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/19/2552617.html 在阎宏博士的<JAVA与模式>一书中开头 ...

  10. 对于vue的一些理解

    首先是组件之间的通信方式 父组件到子组件的通信: props和$refs 子组件到父组件的通信: events 和 $parents 以及 $root 组件之间的通信 eventBus和vuex ev ...