目录

• 1. 资源下载
• 2. 生成页面
• • 2.1 编辑和预览页面
  • 2.2 文本渲染页面
• 3. 图片上传
• • 3.1 前端配置
  • 3.2 后端接口
• 4. 图片粘贴[^2]

1. 资源下载

1. 官网下载
   
2. gitee 下载
   

2. 生成页面

2.1 编辑和预览页面

将资源（精简后 Editor.md 资源¹）导入项目：

按照官方教程生成初始页面，本人SSM项目的JSP页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>





### Hello Editor.md !

运行结果：

JS 中的属性和值可参考资源下的README.md文件。

2.2 文本渲染页面

代码（JSP 页面）如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>





### Hello world!

运行结果：

注：

• 为了解析的正确性，两个 textarea 标签之间不能空行。
• 出于安全考虑，关闭对 HTML 标签的解析（默认关闭），也可过滤一些不安全的标签而解析其他安全的标签，例如htmlDecode : "style,script,iframe"即表示过滤style,script,iframe相关的标签。详情可见 Editor.md 资源下的examples/html-tags-decode.html文件。

3. 图片上传

3.1 前端配置

官网教程

JS 配置：

{imageUpload    : true,imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "后端接口",
}

前端需要后端返回的数据格式：

{success : 0 | 1,           // 0 表示上传失败，1 表示上传成功message : "提示的信息，上传成功或上传失败及错误信息等。",url     : "图片地址"        // 上传成功时才返回
}

3.2 后端接口

前端以editormd-image-file参数向后端传递图片数据，后端接口代码：

/*** 处理 editor.md 编辑器的图片上传和图片粘贴的功能。required = true 表示该参数必须有值，否则会抛出异常，* value 表示请求中传入参数的名称，如果不设置 value 值，则默认为形参名。* @param file 前端上传的图片文件* @return 指定格式的 JSON 数据* @throws Exception*/
@RequestMapping("/manage_pic")
@ResponseBody
public JSONObject editormdPic(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {//------------------------------------生成项目名（包含路径）---------------------------------String trueFileName = file.getOriginalFilename();//截取尾缀String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));Date date = new Date();SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");String datestr = simpleDateFormat.format(date);String fileName = datestr + "_" + UUID.randomUUID() + suffix;/** request.getSession().getServletContext().getRealPath()获取的是当前项目的路径，所以代码返回的是项目在容器中的实际发布运行的根路径 */String path = request.getSession().getServletContext().getRealPath("/images/");File targetFile = new File(path, fileName);if (!targetFile.exists()) {targetFile.mkdirs();}//-------------------------------------保存图片----------------------------------------try {file.transferTo(targetFile);} catch (Exception e) {e.printStackTrace();}//----------------------------------返回前端指定的 JSON 格式的数据------------------------JSONObject res = new JSONObject();res.put("url", "images/" + fileName);res.put("success", 1);res.put("message", "upload success!");return res;
}

4. 图片粘贴²

实现图片的粘贴功能须在前端 JS 中的 editor 配置中配置如下参数：

onload: function () {initPasteDragImg(this); 
}

然后在页面中引入copyimg.js文件即可，copyimg.js文件代码如下：

function initPasteDragImg(Editor){var doc = document.getElementById(Editor.id)doc.addEventListener('paste', function (event) {var items = (event.clipboardData || window.clipboardData).items;var file = null;if (items && items.length) {// 搜索剪切板itemsfor (var i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}} else {console.log("当前浏览器不支持");return;}if (!file) {console.log("粘贴内容非图片");return;}uploadImg(file,Editor);});var dashboard = document.getElementById(Editor.id)dashboard.addEventListener("dragover", function (e) {e.preventDefault()e.stopPropagation()})dashboard.addEventListener("dragenter", function (e) {e.preventDefault()e.stopPropagation()})dashboard.addEventListener("drop", function (e) {e.preventDefault()e.stopPropagation()var files = this.files || e.dataTransfer.files;uploadImg(files[0],Editor);})
}
function uploadImg(file,Editor){var formData = new FormData();var fileName=new Date().getTime()+"."+file.name.split(".").pop();formData.append('editormd-image-file', file, fileName);$.ajax({url: Editor.settings.imageUploadURL,type: 'post',data: formData,processData: false,contentType: false,dataType: 'json',success: function (msg) {var success=msg['success'];if(success==1){var url=msg["url"];if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){Editor.insertValue("![图片alt]("+msg["url"]+")");}else{Editor.insertValue("[下载附件]("+msg["url"]+")");}}else{console.log(msg);alert("上传失败");}}});
}

结果演示：