asp.net-mvcwmd-editor

How to include WMD Editor in my website?


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?


Solution

  • 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