JavaWEB之Markdown 編輯器Editor.md整合使用教程
阿新 • • 發佈：2019-01-27
第一步：下載外掛
第二步：解壓外掛，並將需要的包拷進專案。
如圖：
第三步：配置
<!-- editormd start -->
<link href="<%=path%>/app/editormd/css/editormd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/script/jquery-1.9.0.min.js"></script>
<script 每個 Editor.md 的 ID 元素下都有一個儲存 Markdown 原始碼的 Textarea，你也可以通過設定開啟另一個儲存 HTML 原始碼的 Textarea，可以按需要獲取相應的值，如下：
<body>
This is my JSP page. <br>
<!-- editormd start -->
<div class="editormd" id="test-editormd">
<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="editormd"></textarea>
<!-- 第二個隱藏文字域，用來構造生成的HTML程式碼，方便表單POST提交，這裡的name可以任意取，後臺接受時以這個name鍵為準 -->
<!-- html textarea 需要開啟配置項 saveHTMLToTextarea == true -->
<textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml"></textarea>
</div>
<!-- editormd end --> 然後重新整理介面應該就顯示出編輯器了。
第四：測試及與後臺聯調使用
<!-- editormd 測試 start -->
<p id="p1"></p><br>
<p id="p2"></p><br>
<button id="btn">按鈕</button><br>
<!-- 點選進入index2介面，即HTML前端展示介面 -->
<a href="/ssm/login/editormd">index2</a><br>
<script type="text/javascript">
$('#btn').click(function() {
//獲取第二個textarea的值，即生成的HTML程式碼 實際開發中此值存入後臺資料庫
var editorhtml=$("#editorhtml").val();
$("#p1").text(editorhtml+" editorhtml");
//獲取第一個textarea的值，即md值 實際開發中此值存入後臺資料庫
var editormd2=$("#editormd").val();
$("#p2").text(editormd2+" editormd");
});
//剛進入文件的時候，可以給第一個textarea設定初始md。 實際開發中從後臺獲取
$(document).ready(function() {
var md="**t**";
$("#editormd").text(md);
});
</script>
<!-- editormd 測試 end -->
</body>
</html>index2.jsp
<!--editormd.preview start -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/app/editormd/css/editormd.preview.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/app/editormd/css/editormd.css" />
<!-- <div class="content" id="content">${faq.text }</div> ${faq.text }內容為從伺服器獲取的HTML-->
<div class="content" id="content"><hr> <p>rewtf<strong>erwefgfewfwsvc</strong></p> <blockquote> <blockquote> <hr style="page-break-after:always;" class="page-break editormd-page-break" /></blockquote> </blockquote> <hr style="page-break-after:always;" class="page-break editormd-page-break" /><p>[========]<br>| | |ul<br>| —————— | —————— |<br>| | |<br>| | |</p> <h1 id="h1-erftewg"><a name="erftewg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>erftewg</h1><pre><code>@RequestMapping("/activatemail") private String activatemail(String actiCode,String email){ logger.debug("ws-----activatemail----actiCode="+actiCode+" email="+email); Person person = new Person(); person.setActiCode(actiCode); person.setMail(email); boolean isAc = this.personService.activatEmail(person); if(isAc){//啟用成功，3秒跳轉 return "activateCode"; }else{ //啟用失敗頁面 return "activateCode"; } }jyghjmmkghmkghm </code></pre><p>```uluil,ui.,u.,uo.uokiulk</p></div>
<script type="text/javascript" src="<%=path%>/script/jquery-1.9.0.min.js"></script>
<script src="<%=request.getContextPath()%>/app/editormd/lib/marked.min.js"></script>
<script src="<%=request.getContextPath()%>/app/editormd/lib/prettify.min.js"></script>
<script src="<%=request.getContextPath()%>/app/editormd/editormd.min.js"></script>
<script type="text/javascript">
editormd.markdownToHTML("content",{
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 預設不解析
flowChart : true, // 預設不解析
sequenceDiagram : true, // 預設不解析
});
</script>
<!--editormd.preview end -->用HTML程式碼模擬測試 。實際開發從後臺獲取html,給content。
效果如圖：
第五：自定義工具欄
toolbarIcons : function() {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
},你可能看的莫名其貌，我如何知道有什麼標籤 (“undo”, “redo”, )怎麼去掉一兩個不需要的功能呢。
這時候就要看外掛Js原始碼了。
原始碼中顯示共有這些標籤：
t.toolbarModes={full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],mini:["undo","redo","|","watch","preview","|","help","info"]}OK，根據自己需要的定製吧