As I already stated in my previous post, I’d like to have a WYSISWM editor instead of the WYSISWG editor (tinyMCE) shipped with BlogEngine.net. I’m also planning to add client side code syntax highlight, but this will come later. Here are the few steps I want to achieve:

1. Switch BlogEngine.net to raw text editor mode to be able to write my post in Markdown
2. Add TextFormatter extension to convert my posts to HTML
3. Improve BlogEngine.net’s raw text editor using markItUp!
4. Add live preview with Showdown
5. Add code syntax highlighting with google code prettify

And I’ll try to do with with minimum changes in BlogEngine.net code. In this first part, I’ll do the easiest and most important steps (1 and 2).

Setup raw editor mode

This could have been a fairly easy task if this feature was not bugged in latest BlogEngine.Net release package. I had two choices, fixing the issue manually or getting a more recent version from the source code repository. I choose the later. Once the feature is available, I just need to click the “Use raw HTML editor” on the “Add Entry” page. That’s it. I can start to write my posts using Markdown.

Add TextFormatter extension

This extension will convert my posts to HTML. Right now, the posts I write using Markdown will be displayed as is, i.e. with no formatting. Installing the extension is a matter of seconds. Just download and unzip the archive, put both DLLs in the bin folder of my BlogEngine.net installation and TextFormatter.cs in App_Code/Extensions/. All I need to do now is opening the Extension admin page and edit TextFormatter settings to activate it on all posts by unchecking the “Format only marked entries” checkbox.

That’s it. I can start to view the posts I write using Markdown. This was all done very easily thanks to BlogEngine.net’s flexibility. With two very simple steps, I am now able to edit my posts using a WYSIWYM editor, I couldn’t ask for more. Well… actually, I’m asking for more: an editor that is more than just a <textarea>, that’s why next part will be dedicated to markItUp! integration.