How to include WMD Editor in my website?

Question

I know this might seem a simple question, but with all the WMD versions out there, I need to know how to include WMD Editor in my website, and is there a server control to include in server-side or there is only WMD classes to manage and sanitize input content?

Answer 1

I recently wrote an article in my blog with a simple discussion on how to get derobins wmd editor (same one as the SO wmd editor) in your web site: http://codesprout.blogspot.com/2011/03/wysiwyg-derobins-wmd-markdown-editor-in.html In my blog I provide the links for downloading the latest WMD editor, the instructions and a test page provided with the WMD download.

Installation
The installation instructions were quite good, so the installation went without a hitch!

Usage
I found it useful to muck with the wmd test page a little, just to get a feel for the editor (which should be pretty familiar to people who are already familiar with StackOverflow).

Implementation
Suppose you've already added/merged the wmd style sheet to your web site's style sheet, now you just need to add the proper references in your master page, create a partial view with the wmd editor, and finally display the partial view on a page of your choice.

Step 1: Follow the installation instructions for wmd. The installation are in the readme file of the wmd download.

Step 2: Create a partial view for the editor (I called mine MarkdownControl).

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<div id="wmd-editor" class="wmd-panel">
 <div id="wmd-button-bar"></div>
 <textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>

Step 3: Display the control in a page of your choice:

<% Html.RenderPartial("MarkdownControl"); %>

And there you have it: a WYSIWYG editor in a partial view which you can display anywhere on your web site! You can see my implementation in action here: www.mydevarmy.com/Competition/Propose