How to Turn RadEditor into Markdown Editor

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

    Posted 18 Mar Link to this post

    Requirements

    Telerik Product and Version

    All

    Supported Browsers and Platforms

    All

    Components/Widgets used (JS frameworks, etc.)

    markdown-jshtml-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