Pages

Monday, March 7, 2011

WYSIWYG: derobins wmd markdown editor in a partial view

Putting derobins wmd markdown editor in a partial view was very easy, so this should be a pretty straight forward post. The main benefit of placing your wysiwyg editor in a partial view is that you can treat it like a widget and display it anywhere on your web site with ease. However, I am yet to try and capture the content of the editor. I hope that capturing the input from the editor in the partial view will not be that difficult, but if it turns out to be something messy, then this idea might have to get scrapped.

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

No comments:

Post a Comment