Integrating MarkItUp Rich Text Editor and ASP.NET MVC

 

MarkItUp identifies itself as being the Universal Markup Editor and from as far as I can tell, this is probably true! It was very easy to integrate the jQuery editor into my new Blog Admin views. I will try to illustrate how I was able to do this below.

In addition to the jQuery MarkItUp files, you will also need to download the MarkUp to HTML parser/enhancer of your choice. I used the MarkdownSharp framework which is what the makes of StackOverflow.com have recently converted to an Open Source project.

Download the MarkItUp Files and MarkDown Sharp

You'll need to take a look at the MarkItUp Website and download a couple of different files.
- markItUp! pack 1.1.6
- Basic MarkDown Set
- MarkDownSharp

Include MarkItUp Folder In Your Project

Now that you have the files downloaded, you need to deploy them to your MVC site. I have deployed the MarkItUp folder to my Scripts directory. The MarkItUp folder contains 3 different folders (sets, skins, and templates) and you'll find a couple of .js files in the root of the folder.

Once the MarkItUp folder is in your project, open up the MarkDown file that you downloaded above. You will need to deploy this folder into the Sets folder described above in your project.

Reference JavaScript and CSS Files On Views

In order for the images and formatting to be properly applied to your UI, you'll need to make sure that you get these items referenced in your view. These four items are:

<link href="../../Scripts/markitup/skins/markitup/style.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/markitup/sets/markdown/style.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/markitup/sets/markdown/set.js" type="text/javascript"></script>
<script src="../../Scripts/markitup/jquery.markitup.pack.js" type="text/javascript"></script>

Add TextArea to your ASP.NET MVC View

<%=Html.TextArea("Text", "", 30, 200, 50)%>

Use jQuery to render TextArea as MarkItUp Rich Text Editor

    $(document).ready(function() {
        $('#Text').markItUp(mySettings);
    });

Create ActionResult Method In Controller for Preview

One of the nice things about this editor is the ability to preview what your entry will actually look like. In order for this to work, we need to create a method where we can pass in the MarkDown formatted text and convert it to HTML.

This method will use whatever your MarkDown parser/enhancer of choice is to do the work. In order to use the MarkDownSharp project, I simply included the project from the zip file in my MVC Solution, added the reference for MarkDownSharp to my MVC Project, and I was good to go.

    [ValidateInput(false)]
    public String ParseCode(string toBeParsed)
    {
        var md = new Markdown();
        return md.Transform(toBeParsed);
    }

Modify the MarkItUp\Sets\MarkDown\set.js File For Preview Functionality

In order for the preview to properly work, you'll need to modify the set.js file in the MarkDown sets folder. There are a few properties that need to be tweaked in order for the controller functionality you created above to work correctly.

previewParserPath: '/MyController/ParseCode', // path to your MarkDown parser
previewParserVar: 'toBeParsed', // variable to be parsed