如何在一个页面中使用多个markDown编辑器

How to use multiple markDown Editor in one page?

本文关键字：编辑器 markDown 一个      更新时间：2024-06-15

我需要接受用户的输入，应该在每个onKeyup（）事件上向用户预览。

通过外观&感觉和功能上应该和"StackOverFlow"文本输入编辑器一样。

我对它做了很好的研究。把它分享给其他有需要的人。

谢谢&问候，

Arun 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:

关键部分是：markdown编辑器接受三个参数，第一个是强制性的，第二个，第三个是可选的。

在第二个论证中，传递了区分后缀id。

正如您所知，markdown编辑器总是在查找#wmd-input、#wmd-preview元素。

为了在同一页中区分它，它在上面的id中添加了后缀，并将该后缀作为第二个参数传递。

仅此而已。

相关文章：