Editor.md 的使用方法及图片处理
目录
- 1. 资源下载
- 2. 生成页面
-
- 2.1 编辑和预览页面
- 2.2 文本渲染页面
- 3. 图片上传
-
- 3.1 前端配置
- 3.2 后端接口
- 4. 图片粘贴
1. 资源下载
- 官网下载
- gitee 下载
2. 生成页面
2.1 编辑和预览页面
将资源（精简后 Editor.md 资源1）导入项目：
按照官方教程生成初始页面，本人SSM项目的JSP页面代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
DOCTYPE html>
<html>
<head>
<title>Titletitle>
<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>Titletitle>
<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">
<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 text
htmlDecode : "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) {
// 搜索剪切板items
for (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 的一些渲染样式也被我修改，资源下载 ↩︎
参考链接 ↩︎