javaweb之MarkDown编辑器的嵌入
下载editor.md
实现拖拽图片上传，ctrl+v截图上传
目录结构
image.png
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<link href="editor-md-master/css/editormd.css" rel="stylesheet">
<link rel="stylesheet" href="editor-md-master/examples/css/style.css">
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
<script src="editor-md-master/jquery.min.js"></script>
<script src="editor-md-master/editormd.min.js"></script>
<script>
var blob = null;
var testEditor;
document.ondragover = function () {
return false;
};
document.ondrop = function (e) {
console.log();
blob = e.dataTransfer.items[0].getAsFile();
var req = new XMLHttpRequest();
var formdata = new FormData();
formdata.append("editormd-image-file",blob);
req.open("post","${pageContext.request.contextPath}/mapupload.do",true);
req.send(formdata);
req.onload = function (ev) {
var json = JSON.parse(req.responseText);
testEditor.appendMarkdown("!["+ json.name +"](" + json.url + ")");
}
e.preventDefault();
};
//系统的ctrl+v 会触发js中的document的paste事件，event.clipboardData可以获取粘贴板里的内容，虽然在控制台
//上显示clipboardData的长度为0，但是确实是可以获取到其中内容的。clipboardData.items获取内容列表，
//clipboardData.items[0]为最近复制到粘贴板的内容，如果内容是截图，则type为“image/png”，
//所以可用type来判断是否是截图，然后用items[0].getAsFile()方法将其转为图片
document.addEventListener("paste", function (event) {
// console.log(event);
var isChrome = false;
if (event.clipboardData || event.originalEvent) {
//某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
// for chrome
var items = clipboardData.items;
var len = items.length;
isChrome = true;
for (var i = 0; i < len; i++) {
console.log(items[i]);
if (items[i].type.indexOf("image") !== -1) {
//getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
var req = new XMLHttpRequest();
var formdata = new FormData();
formdata.append("editormd-image-file",blob);
req.open("post","${pageContext.request.contextPath}/mapupload.do",true);
req.send(formdata);
req.onload = function (ev) {
var json = JSON.parse(req.responseText);
testEditor.appendMarkdown("!["+ json.name +"](" + json.url + ")");
}
}
}
}
}
});
window.onload = function (ev) {
testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path: "editor-md-master/lib/",
theme: "dark", //我也不知道这个主题是改什么的
previewTheme: "dark", //右边markdown框的主题
editorTheme: "pastel-on-dark", //左边文本输入框的主题
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: "${pageContext.request.contextPath}/mapupload.do" , // 图片上传的url
// onload : function() { //窗口加载完成的回调函数
// alert(11);
// console.log('onload', this);
// console.log()
// this.fullscreen();
// this.unwatch();
// this.watch().fullscreen();
//
// this.setMarkdown("#PHP");
// this.width("100%");
// this.height(480);
// this.resize("100%", 640);
// }
});
}
</script>
</head>
<body>
<%--div class editormd-theme-dark 设置上方工具栏主题--%>
<form method="post" action="${pageContext.request.contextPath}/getvalue.do">
<div id="test-editormd" class="editormd editormd-vertical editormd-theme-dark" style="width: 90%; height: 740px;">
<textarea class="editormd-markdown-textarea" placeholder="Enjoy Markdown! coding now..."></textarea>
</div>
</form>
<button id="button">提交</button>
</body>
</html>
servlet
package com.neu.servlet;
import com.alibaba.fastjson.JSON;
import com.neu.utils.MapRec;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@WebServlet(name = "MapuploadServlet",urlPatterns = "/mapupload.do")
@MultipartConfig
public class MapuploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part part = request.getPart("editormd-image-file");
String path = request.getServletContext().getRealPath("")+"upload/";
File file = new File(path);
if (!file.exists()){
file.mkdir();
}
UUID uuid = UUID.randomUUID();
MapRec mapRec = new MapRec();
mapRec.setSuccess(1);
mapRec.setMessage("成功");
mapRec.setName(part.getSubmittedFileName());
mapRec.setUrl("upload/" + uuid + part.getSubmittedFileName());
part.write(path + uuid + part.getSubmittedFileName());
response.getWriter().print(JSON.toJSONString(mapRec));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet");
}
}
package com.neu.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "GetValueServlet",urlPatterns = "/getvalue.do")
public class GetValueServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String doc = request.getParameter("test-editormd-markdown-doc");
String html = request.getParameter("test-editormd-html-code");
System.out.println(html);
System.out.println(doc);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
MapRec类
package com.neu.utils;
public class MapRec {
private int success;
private String message;
private String url;
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getSuccess() {
return success;
}
public void setSuccess(int success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
Filter
package com.neu.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
@WebFilter(filterName = "Filter01_Encode",urlPatterns = "/*")
public class Filter01_Encode implements Filter {
public void destroy() {
}
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
chain.doFilter(req, resp);
}
public void init(FilterConfig config) throws ServletException {
}
}
