第一步：下载插件
项目地址：http://pandao.github.io/editor.md/
第二步：解压插件，并将需要的包拷进项目。
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); } }
