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());
    }
  }
}
相关文章
|
1月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
72 4
|
2月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
41 1
基于HTML5开发的Markdown在线编辑器
|
2月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2月前
|
Linux C++ iOS开发
HTML 编辑器
HTML 编辑器。
23 2
|
2月前
|
IDE 数据可视化 开发工具
HTML 编辑器
HTML 编辑器
|
2月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
|
2月前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
97 3
|
2月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
100 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
10天前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
24天前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
22 5