第一步：下載插件
項目地址：http://pandao.github.io/editor.md/
第二步：解壓插件，并將需要的包拷進項目。
image.png
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<a href="add_or_edit.jsp">新增主題</a>
<a href="edit_topic">編輯主題</a>
</body>
</html>
add_or_edit.jsp
<%--
Created by IntelliJ IDEA.
User: ttc
Date: 2018/3/18
Time: 12:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/editor-md-master/css/editormd.css" />
<script src="${pageContext.request.contextPath}/jquery/jquery.js"></script>
<script src="${pageContext.request.contextPath}/editor-md-master/editormd.min.js"></script>
<script>
$(function () {
var testEditor = editormd({
id: "test-editormd",
height: 640,
width : "90%",
placeholder : "文明社會，理性評論，支持Markdown",
path: "${pageContext.request.contextPath}/editor-md-master/lib/",
toolbarIcons: function () {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return editormd.toolbarModes['simple'];
},
//toolbar : false, // 關(guān)閉工具欄
codeFold: true,
searchReplace: true,
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
htmlDecode: "style,script,iframe|on*", // 開啟 HTML 標簽解析，為了安全性，默認不開啟
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 開啟科學公式 TeX 語言支持，默認關(guān)閉
//previewCodeHighlight : false, // 關(guān)閉預覽窗口的代碼高亮，默認開啟
flowChart: true, // 疑似 Sea.js與 Raphael.js 有沖突，必須先加載 Raphael.js ，Editor.md 才能在 Sea.js 下正常進行；
sequenceDiagram: true, // 同上
//dialogLockScreen : false, // 設(shè)置彈出層對話框不鎖屏，全局通用，默認為 true
//dialogShowMask : false, // 設(shè)置彈出層對話框顯示透明遮罩層，全局通用，默認為 true
//dialogDraggable : false, // 設(shè)置彈出層對話框不可拖動，全局通用，默認為 true
//dialogMaskOpacity : 0.4, // 設(shè)置透明遮罩層的透明度，全局通用，默認值為 0.1
//dialogMaskBgColor : "#000", // 設(shè)置透明遮罩層的背景顏色，全局通用，默認為 #fff
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "{:url('api/uploader/uploadEditorImg?pic_type=10')}",
});
$("#submit").click(function () {
var param = $("#article_form").serialize();
$.post('${pageContext.request.contextPath}/save_topic', param)
.done(function (res) {
alert(res);
return false;//阻止默認行為
})
})
});
</script>
</head>
<body>
<form action="#" method="post" id = "article_form">
<div class="editormd" id="test-editormd">
<textarea class="editormd-markdown-textarea" name="topic_markdown_content" id = "topic_markdown_content">${topic_markdown_content}</textarea>
</div>
<input type="button" value="保存博文" id = "submit">
</form>
</body>
</html>
SaveTopicServlet .java
@WebServlet(name = "SaveTopicServlet",urlPatterns = "/save_topic")
public class SaveTopicServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strHtml = request.getParameter("test-editormd-html-code");
String strMarkdown = request.getParameter("topic_markdown_content");
System.out.println(strHtml);
System.out.println(strMarkdown);
response.getWriter().print("ok");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
EditServlet.java
@WebServlet(name = "EditServlet",urlPatterns = "/edit_topic")
public class EditServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strMarkdown = "### fdsfd";
request.setAttribute("topic_markdown_content",strMarkdown);
request.getRequestDispatcher("add_or_edit.jsp").forward(request,response);
}
}
