Turning RadEditor into a Markdown Editor

In this tutorial, find out how to turn RadEditor into a Markdown editor easily using custom filters and some external JS libraries.

Recently, more and more tools have started using Markdown instead of HTML to enable users to create content for the web. The syntax is very simple, which allows end users to quickly learn it and start creating well-structured content. Later, by using neat libraries, Markdown is translated to HTML and sent to the browser.

Instead of searching for new tools that will help you support Markdown, you can keep using RadEditor UI for ASP.NET AJAX and adjust it a bit to give you the best results in terms of Markdown syntax.

This blog post is inspired by a recently created code library thread that provides the solution to the case here. You can take a look at it by following this link—How to Turn RadEditor into Markdown Editor. Although the code explains it all, I would like to go a bit deeper and explain how RadEditor’s flexible architecture contributes to the solution.

The final result that is achieved after following this post is illustrated in this video here:

Understanding Content Filters

Content filters in RadEditor are a powerful way to control the HTML content that the end user generates. If you are interested in the documentation you can find it here: Content Filters. You can see that there is a long list of useful, ready-to-use filters, but what we are interested in is creating our own filter that will transform HTML to Markdown and vice versa. How this is possible?

Filters, basically, get the HTML from the content area and transform it to a string before going to HTML mode or submitting the content. Creating a custom content filter will enable us to manipulate this HTML string and transform it to whatever we would like.

How to Convert HTML to Markdown

Luckily, there are plenty of tools and libraries to do that. For our situation, however, we need tools that do that only on the client as content filters run only client-side code.

You can use any JS library you find suitable. I considered using these ones: markdown-js and html-md. The libraries’ documentation explains best how to use them. We will just download them and add them to the page:

Implementing the Custom Filter

Make sure you are creating a string filter: this.set_isDom(false). Using true argument will create a DOM filter, which is not the right decision for our task. Next, just use the proper tool implementation to convert HTML to Markdown in the getHtmlContent method. Add the one for Markdown to HTML in the getDesignContent.

Having this, you will see that any HTML from Design mode will turn to Markdown in HTML mode.

Simplifying Tools for better UX

As Markdown supports very simple content formatting, many tools and their complexities are rather unneeded. Also, modules and the Preview mode are not useful in terms of Markdown editing, so we will disable them. You can also adjust the text of the HTML button to prevent possible confusion.

ASP.NET

C#

VB

Summary

With the code I showed you so far you can modify RadEditor to generate Markdown instead of HTML, and provide a very basic and simplistic UI that will help users to create well-structured content.

One more benefit about having Markdown is that you fill your database with less content. Which is certainly good. Still, you should consider getting the HTML from that Markdown when rendering this in a browser or in an email client. This, however, I think, will be a simple task for you after reading this post.

Cool bonus: As of Kendo UI R2 2016, the Kendo UI Editor is also capable of such a modification (generating Markdown). To find out how, just follow this how-to article—Create Markdown Editor.

Do you intend to use Markdown? Would you use RadEditor to create Markdown? Are you going to drop HTML in favor of Markdown? What do you love about Markdown? If you have any thoughts about these topics, I would love to hear them, so please do post a comment below.