How to Turn RadEditor into Markdown Editor

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 18 Mar 2016 Link to this post

    Requirements

    Telerik Product and Version

    		 All

    Supported Browsers and Platforms

    		 All

    Components/Widgets used (JS frameworks, etc.)

    		 markdown-js; html-md

    PROJECT DESCRIPTION 
    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.

    Implementation:

    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 () {
        MyFilter.initializeBase(this);
        this.set_isDom(false);
        this.set_enabled(true);
        this.set_name("MarkDownToHtml");
        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.

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

    VB
    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.