Bootstrap 可视化HTML编辑器,summernote(3)

简介: Bootstrap 可视化HTML编辑器,summernote

注释当中加的很详细,这里把其他关联的代码一并贴出,仅供参照。

  debug : function(msg) {
    if (this._set.debug) {
      if (typeof (console) != "undefined")
        console.log(msg);
      else
        alert(msg);
    }
  },
jsonEval : function(data) {
    try {
      if ($.type(data) == 'string')
        return eval('(' + data + ')');
      else
        return data;
    } catch (e) {
      return {};
    }
  },
  ajaxError : function(xhr, ajaxOptions, thrownError) {
    if (xhr.responseText) {
      $.showErr("<div>" + xhr.responseText + "</div>");
    } else {
      $.showErr("<div>Http status: " + xhr.status + " " + xhr.statusText + "</div>" + "<div>ajaxOptions: " + ajaxOptions + "</div>"
          + "<div>thrownError: " + thrownError + "</div>");
    }
  },
  ajaxDone : function(json) {
    if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
      if (json[YUNM.keys.message]) {
        YUNM.debug(json[YUNM.keys.message]);
        $.showErr(json[YUNM.keys.message]);
      }
    } else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) {
      YUNM.debug(json[YUNM.keys.message]);
      $.showErr(json[YUNM.keys.message] || YUNM.msg("sessionTimout"), YUNM.loadLogin);
    }
  },


####2、后端springMVC文件保存


#####2.1、为springMVC增加文件的配置


<bean id="multipartResolver"
  class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="UTF-8">
  <property name="maxUploadSize" value="1024000000"></property>
  </bean>
<mvc:annotation-driven conversion-service="conversionService" />
  <bean id="conversionService"
  class="org.springframework.format.support.FormattingConversionServiceFactoryBean">
  <property name="converters">
    <list>
    <!-- 这里使用string to date可以将dao在jsp到controller转换的时候直接将string格式的日期转换为date类型 -->
    <bean class="com.honzh.common.plugin.StringToDateConverter" />
<!--      为type为file类型的数据模型增加转换器 -->
    <bean class="com.honzh.common.plugin.CommonsMultipartFileToString" />
    </list>
  </property>
  </bean>

这里就不做过多介绍了,可参照我之前写的SpringMVC之context-dispatcher.xml,了解基本的控制器


#####2.2、FileController.java


package com.honzh.spring.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.honzh.common.base.UploadFile;
import com.honzh.spring.service.FileService;
@Controller
@RequestMapping(value = "/file")
public class FileController extends BaseController {
  private static Logger logger = Logger.getLogger(FileController.class);
  @Autowired
  private FileService fileService;
  @RequestMapping("")
  public void index(HttpServletRequest request, HttpServletResponse response) {
  logger.debug("获取上传文件...");
  try {
    UploadFile uploadFiles = fileService.saveFile(request);
    renderJsonDone(response, uploadFiles);
  } catch (Exception e) {
    logger.error(e.getMessage());
    logger.error(e.getMessage(), e);
    renderJsonError(response, "文件上传失败");
  }
  }
}


#####2.3、FileService.java

package com.honzh.spring.service;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.honzh.common.Variables;
import com.honzh.common.base.UploadFile;
import com.honzh.common.util.DateUtil;
@Service
public class FileService {
  private static Logger logger = Logger.getLogger(FileService.class);
  public UploadFile saveFile(HttpServletRequest request) throws IOException {
    logger.debug("获取上传文件...");
    // 转换为文件类型的request
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    // 获取对应file对象
    Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
    Iterator<String> fileIterator = multipartRequest.getFileNames();
    // 获取项目的相对路径(http://localhost:8080/file)
    String requestURL = request.getRequestURL().toString();
    String prePath = requestURL.substring(0, requestURL.indexOf(Variables.ctx));
    while (fileIterator.hasNext()) {
      String fileKey = fileIterator.next();
      logger.debug("文件名为:" + fileKey);
      // 获取对应文件
      MultipartFile multipartFile = fileMap.get(fileKey);
      if (multipartFile.getSize() != 0L) {
        validateImage(multipartFile);
        // 调用saveImage方法保存
        UploadFile file = saveImage(multipartFile);
        file.setPrePath(prePath);
        return file;
      }
    }
    return null;
  }
  private UploadFile saveImage(MultipartFile image) throws IOException {
    String originalFilename = image.getOriginalFilename();
    logger.debug("文件原始名称为:" + originalFilename);
    String contentType = image.getContentType();
    String type = contentType.substring(contentType.indexOf("/") + 1);
    String fileName = DateUtil.getCurrentMillStr() + new Random().nextInt(100) + "." + type;
    // 封装了一个简单的file对象,增加了几个属性
    UploadFile file = new UploadFile(Variables.save_directory, fileName);
    file.setContentType(contentType);
    logger.debug("文件保存路径:" + file.getSaveDirectory());
    // 通过org.apache.commons.io.FileUtils的writeByteArrayToFile对图片进行保存
    FileUtils.writeByteArrayToFile(file.getFile(), image.getBytes());
    return file;
  }
  private void validateImage(MultipartFile image) {
  }
}


#####2.4、UploadFile.java

package com.honzh.common.base;
import java.io.File;
import com.honzh.common.Variables;
public class UploadFile {
  private String saveDirectory;
  private String fileName;
  private String contentType;
  private String prePath;
  private String completeSavePath;
  private String relativeSavePath;
  public UploadFile(String saveDirectory, String filesystemName) {
    this.saveDirectory = saveDirectory;
    this.fileName = filesystemName;
  }
  public String getFileName() {
    return fileName;
  }
  public String getSaveDirectory() {
    return saveDirectory;
  }
  public String getContentType() {
    return contentType;
  }
  public void setContentType(String contentType) {
    this.contentType = contentType;
  }
  public String getPrePath() {
    if (prePath == null) {
      return "";
    }
    return prePath;
  }
  public void setPrePath(String prePath) {
    this.prePath = prePath;
    setCompleteSavePath(prePath + getRelativeSavePath());
  }
  public String getCompleteSavePath() {
    return completeSavePath;
  }
  public void setCompleteSavePath(String completeSavePath) {
    this.completeSavePath = completeSavePath;
  }
  public String getRelativeSavePath() {
    return relativeSavePath;
  }
  public void setRelativeSavePath(String relativeSavePath) {
    this.relativeSavePath = relativeSavePath;
  }
  public void setSaveDirectory(String saveDirectory) {
    this.saveDirectory = saveDirectory;
  }
  public void setFileName(String fileName) {
    this.fileName = fileName;
  }
  public File getFile() {
    if (getSaveDirectory() == null || getFileName() == null) {
      return null;
    } else {
      setRelativeSavePath(Variables.ctx + "/" + Variables.upload + "/" + getFileName());
      return new File(getSaveDirectory() + "/" + getFileName());
    }
  }
}
相关文章
|
5月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
203 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
6月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
119 0
|
4月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
55 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
4月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
53 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
4月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(25)网元可视化视图组件(Network)
这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构,包括view、rootCanvas和topCanvas的使用方法和示例。
50 6
|
4月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
55 1
|
3月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
66 0
|
3月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
47 0
|
5月前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
524 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
5月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
120 0