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

Question

I need to take input from user, which should be previewed to user on every onKeyup() event. 我需要从用户那里获取输入，应该在每个onKeyup（）事件上将其预览给用户。

By look & feel and in functionalities it should be same like as of "StackOverFlow" text input editor. 通过外观和功能，它应该与“ StackOverFlow”文本输入编辑器相同。

I'd done the good research on it. 我已经对此进行了很好的研究。 Sharing it for others needy. 与其他有需要的人分享。

Thanks & Regards, 感谢和问候，

Arun Dhwaj 阿伦·达瓦（Arun Dhwaj）

Answer 1

Look the complete code: Multiple_Editor_In_One_Page.jsp 查看完整的代码：Multiple_Editor_In_One_Page.jsp

Step-1: 第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>

Step-2: 第2步：

Crux part is: markdown editor taking three arguments, first is mandatory, 2nd, and 3rd is optional. 关键部分是：markdown编辑器采用三个参数，第一个是强制性的，第二个是可选的，第三个是可选的。

In 2nd argumnet, passed the differentiating suffix id. 在第二个argumnet中，传递了区分后缀id。

As you know markdown editor is always looking for #wmd-input , #wmd-preview elements. 如您所知，降价编辑器始终在寻找#wmd-input和#wmd-preview元素。

In order to differentiate it in same page, it adding suffix, in the above ids, and pass that suffix as 2nd parameter. 为了在同一页面中对其进行区分，它在上述id中添加了后缀，并将该后缀作为第二个参数传递。

Thats All. 就这样。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-14 10:43:52

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-14 10:43:52

解决方案1
1 已采纳 2016-04-14 10:43:52