WMD Editor in ASP.NET MVC 3 Razor

Question

I'm trying to use derobins wmd editor, with ASP.NET MVC 3 Project. I have managed to add the control,

<script src="@Url.Content("~/WMD/showdown.js")" type="text/javascript"></script>
<link href="@Url.Content("~/WMD/wmd.css")" rel="stylesheet" type="text/css" />
......
        <div id="wmd-editor" class="wmd-panel">
            <div id="wmd-button-bar"></div>
            @Html.TextArea("Contents", string.Empty, new
            {
               @class = "wmd-input"
            })
            <div id="wmd-preview" class="wmd-panel"></div>
        </div>
.......
<script src="@Url.Content("~/WMD/wmd.js")" type="text/javascript"></script>

but the WDM Editor is not displayed correctly (No Toolbar, and no Preview).

Please help me to fix this issue?

Answer 1

Based on the documentation the id's of the elements are important:

input textarea

This is where you'll enter markdown.  id is "wmd-input".

But with your code:

 @Html.TextArea("Contents", string.Empty, new
            {
               @class = "wmd-input"
            })

You are setting the class of the textare not the id. Try this instead:

 @Html.TextArea("Contents", string.Empty, new
            {
               id = "wmd-input"
            })