做淘宝客最好的网站是什么网站广州白云区最新新闻
目录
- 1. 资源下载
- 2. 生成页面
- 2.1 编辑和预览页面
- 2.2 文本渲染页面
- 3. 图片上传
- 3.1 前端配置
- 3.2 后端接口
- 4. 图片粘贴[^2]
1. 资源下载
- 官网下载
- gitee 下载
2. 生成页面
2.1 编辑和预览页面
将资源（精简后 Editor.md 资源1）导入项目：
按照官方教程生成初始页面，本人SSM项目的JSP页面代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><title>Title</title><link rel="stylesheet" href="/editormd/css/editormd.css"><script src="/js/jquery-3.6.0.min.js"></script><script src="/editormd/editormd.js"></script>
</head>
<body>
<div id="editor"><textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script>$(function() {var editor = editormd("editor", {path: "/editormd/lib/"});});
</script>
</body>
</html>
运行结果：
JS 中的属性和值可参考资源下的README.md文件。
2.2 文本渲染页面
代码（JSP 页面）如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><title>Title</title><link rel="stylesheet" href="/editormd/css/editormd.preview.css" /><script src="/js/jquery-3.6.0.min.js"></script><script src="/editormd/editormd.js"></script><script src="/editormd/lib/marked.min.js"></script><script src="/editormd/lib/prettify.min.js"></script>
</head>
<body>
<div id="test-markdown-view"><!-- Server-side output Markdown text --><textarea style="display:none;">### Hello world!</textarea>
</div>
</body>
<script>$(function() {var testView = editormd.markdownToHTML("test-markdown-view", {// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown texthtmlDecode : "style,script,iframe" // Note: If enabled, you should filter some dangerous HTML tags for website security.});});
</script>
</html>
运行结果：
注：
- 为了解析的正确性，两个 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. 图片粘贴2
实现图片的粘贴功能须在前端 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("上传失败");}}});
}
结果演示：
出于项目需要，在去除多余文件后 Editor.md 的一些渲染样式也被我修改，资源下载 ↩︎
参考链接 ↩︎