How to Turn RadEditor into Markdown Editor

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 18 Mar 2016 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)


    You can find here a very easy approach to make RadEditor behave like an Markdown editor. Enabling end users to type Markdown syntax and see the output and at the same time using Design mode to create HTML and see the Markdown.


    Essentially, you will need JavaScript library or libraries to actually handle the transformation from HTML to Markdown and vice verse. Here we choose to use the MIT licensed markdown-js and html-md libraries. 

    <script src="Scripts/markdown.js"></script>
    <script src="Scripts/md.min.js"></script>

    What you need further, is to create a custom content filter that will utilize the libraries to convert the HTML to Markdown when going to HTML mode (it will be renamed later). And from Markdown to HTML when going to Design.

    MyFilter = function () {
        this.set_description("RadEditor filter: Turns HTML mode to Markdown mode.");
    MyFilter.prototype ={
        getHtmlContent: function (content) {
            // Return the result in Markdown by using html-md (md.min.js)
            return md(content);
        getDesignContent: function (content) {
            // Return the result in HTML by using markdown-js (markdown.js)
            return markdown.toHTML(content, 'Maruku');
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

    Finally, you can tweak the HTML mode's button to render "Code" or "Markdown" instead of "HTML". To do so you can use the Localization files or change the Localization properties in the code behind.

    RadEditor1.Localization.Main.RadEditorHtmlMode = "Code";
    RadEditor1.Localization.Main.HtmlMode = "MarkDown Mode";

    RadEditor1.Localization.Main.RadEditorHtmlMode = "Code"
    RadEditor1.Localization.Main.HtmlMode = "MarkDown Mode"

    You can find runnable pages for C# and VB that show the end result of the code above. 
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.