简述
Editor.md 是一款开源在线 Markdown 编辑器,可以通过在github上下载源码。
地址:https://github.com/pandao/pandao.github.io
目录结构:
Editor.md
前端
导入CSS和JS文件:
<!-- Editormd -->
<link rel="stylesheet" href="/static/admin/assets/plugins/editor.md/css/editormd.css">
<!-- Editormd -->
<script src="/static/admin/assets/js/vendor/jquery-1.11.1.min.js"></script>
<script src="/static/admin/assets/plugins/editor.md/editormd.js"></script>
定义一个div,通过jq代码实现效果
<div id="test-editor">
<textarea></textarea>
</div>
$(function() {
var editor = editormd("test-editor", {
width: "75%",
height: 650,
path : '../static/admin/assets/plugins/editor.md/lib/', //该路径为项目中存放Editor.md源代码lib包路径
//theme : "dark",
//previewTheme : "dark",
//editorTheme : "pastel-on-dark",
//markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持,默认关闭
flowChart : true, // 开启流程图支持,默认关闭
sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/admin/upload", //后台文件上传方法
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
});
初始效果:
后台
Editor.md 可以上传图片,后台的接收参数为:editormd-image-file,需要封装返回的参数,格式为:
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等
url : “图片地址” // 上传成功时才返回
后台文件上传方法,该方法同时处理了dropZone文件上传插件和Editor.md文件上传:
/**
* 文件上传
* @param dropzFile
* @param editorFile
* @param request
* @return
*/
@RequestMapping(value = "upload",method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> DropZone(MultipartFile dropzFile,
@RequestParam(value = "editormd-image-file", required = false) MultipartFile editorFile,
HttpServletRequest request){
//数据返回对象
Map<String,Object> result = new HashMap<>();
//判断是dropZone文件还是editor文件
MultipartFile myFile = dropzFile == null ? editorFile : dropzFile;
if(myFile != null){
//获取文件名
String fileName = myFile.getOriginalFilename();
//获取文件后缀名
String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
//获取文件上传文件夹路径
String filePath = request.getSession().getServletContext().getRealPath(Const.UPLOAD_PATH);
//判断文件夹是否存在,不存在就创建文件夹
File file = new File(filePath);
if(! file.exists()){
file.mkdirs();
}
//UUID替换文件名
String filePrefix = UUID.randomUUID().toString();
file = new File(filePath,filePrefix+fileSuffix);
//上传文件
try {
myFile.transferTo(file);
} catch (IOException e) {
logger.error("博客展示图上传出错!!!");
}
//拼装url返回值
String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + Const.UPLOAD_PATH + filePrefix + fileSuffix;
//根据不同的文件封装返回信息
if(dropzFile != null){
result.put("path",url);
}
/**
* success : 0 | 1, // 0 表示上传失败,1 表示上传成功
* message : "提示的信息,上传成功或上传失败及错误信息等。",
* url : "图片地址" // 上传成功时才返回
*/
if(editorFile != null){
result.put("success",1);
result.put("message","上传成功");
result.put("url",url);
}
}
//文件为空
else{
//根据不同的文件封装返回信息
if(dropzFile != null){
result.put("path","");
}
/**
* success : 0 | 1, // 0 表示上传失败,1 表示上传成功
* message : "提示的信息,上传成功或上传失败及错误信息等。",
* url : "图片地址" // 上传成功时才返回
*/
if(editorFile != null){
result.put("success",0);
result.put("message","上传失败");
}
}
return result;
}