第一步：下载插件
项目地址：http://pandao.github.io/editor.md/
第二步：解压插件，并将需要的包拷进项目。
image
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, // 关闭工具栏
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 语言支持，默认关闭
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
flowChart: true, // 疑似 Sea.js与 Raphael.js 有冲突，必须先加载 Raphael.js ，Editor.md 才能在 Sea.js 下正常进行；
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: "{: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);
}
}
网友评论