0
我需要接受來自用戶的輸入,在每個onKeyup()事件中應該將預覽爲給用戶。如何在一個頁面中使用多個markDown編輯器?
通過外觀&的感覺和功能,它應該像「StackOverFlow」文本輸入編輯器一樣。
我做了很好的研究。分享給其他人需要。
感謝&問候,
阿倫Dhwaj
我需要接受來自用戶的輸入,在每個onKeyup()事件中應該將預覽爲給用戶。如何在一個頁面中使用多個markDown編輯器?
通過外觀&的感覺和功能,它應該像「StackOverFlow」文本輸入編輯器一樣。
我做了很好的研究。分享給其他人需要。
感謝&問候,
阿倫Dhwaj
看的完整代碼:Multiple_Editor_In_One_Page.jsp
步驟-1:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Emotions</title>
<script src="resources/recmJs/Markdown.Converter.js"></script>
<script src="resources/recmJs/Markdown.Editor.js"></script>
<script src="resources/recmJs/check.js"></script>
<link rel="stylesheet" type="text/css" href="resources/recm/feedBack.css">
<script type="text/javascript">
function showPreviewUsingMarkDownEditor(uid)
{
var converter = new Markdown.Converter();
var editor = new Markdown.Editor(converter, uid);
editor.run();
}
</script>
</head>
<body>
<br>
<div id="MarkdownEditor-1">
<p><b>MarkdownEditor-1 in one this page </b></p>
<div id="write-title" class="wmd-panel">
<textarea onkeyup="showPreviewUsingMarkDownEditor('-1')" class="wmd-input" id="wmd-input-1" cols="50" rows="6"></textarea>
<div id="wmd-preview-1" class="wmd-panel wmd-preview"></div>
</div>
</div>
<br>
<div id="MarkdownEditor-2">
<p><b>MarkdownEditor-2 in one this page </b></p>
<div id="write-title" class="wmd-panel">
<textarea onkeyup="showPreviewUsingMarkDownEditor('-2')" class="wmd-input" id="wmd-input-2" cols="50" rows="6"></textarea>
<div id="wmd-preview-2" class="wmd-panel wmd-preview"></div>
</div>
</div>
<br>
<div id="MarkdownEditor-3">
<p><b>MarkdownEditor-3 in one this page </b></p>
<div id="write-title" class="wmd-panel">
<textarea onkeyup="showPreviewUsingMarkDownEditor('-3')" class="wmd-input" id="wmd-input-3" cols="50" rows="6"></textarea>
<div id="wmd-preview-3" class="wmd-panel wmd-preview"></div>
</div>
</div>
<br>
<div id="MarkdownEditor-4">
<p><b>MarkdownEditor-4 in one this page </b></p>
<div id="write-title" class="wmd-panel">
<textarea onkeyup="showPreviewUsingMarkDownEditor('-4')" class="wmd-input" id="wmd-input-4" cols="50" rows="6"></textarea>
<div id="wmd-preview-4" class="wmd-panel wmd-preview"></div>
</div>
</div>
<br>
<div id="MarkdownEditor-5">
<p><b>MarkdownEditor-5 in one this page </b></p>
<div id="write-title" class="wmd-panel">
<textarea onkeyup="showPreviewUsingMarkDownEditor('-5')" class="wmd-input" id="wmd-input-5" cols="50" rows="6"></textarea>
<div id="wmd-preview-5" class="wmd-panel wmd-preview"></div>
</div>
</div>
</body>
</html>
步驟2:
癥結部分是:降價編輯採取三個argum首先是強制性的,第二和第三是可選的。
在第二個argumnet中,傳遞了區分後綴id。
如您所知,降價編輯器一直在尋找#wmd-input
,#wmd-preview
元素。
爲了區分它在同一頁面中,它添加後綴,在上面的id中,並將該後綴作爲第二個參數傳遞。
這就是所有。
癥結部分是:降低編輯器帶三個參數,第一個是強制性的,第二個和第三個是可選的。 –