Editor - Import and Export to Markdown

  • RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
    RadEditor's components - toolbar, content area, modes and modules
       
    Toolbar's wrapper  
    Content area wrapper
    RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
    It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
    Editor Mode buttonsStatistics moduleEditor resizer
     
     
    RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
       

Configure Markdown export settings

  • Header Style


  • Anchor Style


  • Image Style


  • Table Style


  • Unparsables Style *


    * (only for address, dl, fieldset, form, map, object, script, noscript)
Isolate this demo as a stand-alone application

This online demo demonstrates the import, paste and export Markdown features of RadEditor.

Import Markdown content to the editor

The makeHtml() client-side method of the Telerik.Web.UI.Editor.Markdown.Converter() object handles the Markdown import feature. Once converted the markdown content can be set in RadEditor via the set_html() method of the control, e.g.

//get a reference to RadEditor
var  editor  $find( "<%=RadEditor1.ClientID%>" ) ;
//get a reference to the textbox with the Markdown content
var  textbox  $ get ( "<%=MarkdownTextBox1.ClientID%>" ) ;
//create an instance of the Markdown converter
var  converter  = new  Telerik.Web.UI.Editor.Markdown.Converter() ;
//set the converted Markdown content in the editor
editor.set_html(converter.makeHtml(textbox. value )) ;

 

Paste Markdown content via the Paste Markdown dialog

The inserted markdown content via the Paste Markdown dialog is converted to valid HTML content. To enable the popup button on the toolbar add the
<tool name="PasteMarkdown"/> tag in the ToolsFile.xml file or register the button inline or via the codebehind as shown in the following help article: Adding Standard Buttons.

Export RadEdtor's content to a TXT file with markdown content

The approach is very straight-forward - to export the editor content to a text file with markdown format fire the ExportToMarkdown() server-side method.

You may also need to configure the exporting settings for the editor through the RadEditor.ExportSettings section. The available properties are:

  • FileName - a string specifying the name (without the extension) of the file that will be created. The file extension is automatically added based on the method that is used.
  • OpenInNewWindow - open the exported Markdown in a new instead of the same page

<telerik:RadEditor ID="RadEditor1" runat="server" >
        
<ExportSettings FileName="Markdown" OpenInNewWindow="true"></ExportSettings>
</telerik:RadEditor>

There is also an OnExportContent server event, which can be used to export silently the markdown content to the server. You can obtain the exported content via the e.ExportOutput property:

<telerik:RadEditor ID="RadEditor1" runat="server" OnExportContent="RadEditor1_ExportContent">
        
<ExportSettings FileName="Markdown" OpenInNewWindow="false"></ExportSettings>
</telerik:RadEditor>

C#

string url, path "";

protected void 
Page_Load(object sender, EventArgs e)
{
    url 
String.Format("{0}.txt", RadEditor1.ExportSettings.FileName);
    
path Server.MapPath(url);
}

protected void ExportToMarkdownButton_Click(object sender, EventArgs e)
{
    RadEditor1.ExportToMarkdown()
;
}
protected void RadEditor1_ExportContent(object sender, EditorExportingArgs e)
{
    
if (File.Exists(path))
    {
        File.Delete(path)
;
    
}

    
using (FileStream fs File.Create(path))
    {
        Byte[] info 
System.Text.Encoding.Default.GetBytes(e.ExportOutput);
        
fs.Write(info, 0, info.Length);
    
}
    Response.Redirect(
"DefaultCS.aspx");
}
VB.NET
Private url As String, path As String = ""

Protected Sub Page_Load(sender As Object, e As EventArgs)
    url 
[String].Format("{0}.txt", RadEditor1.ExportSettings.FileName)
    path 
Server.MapPath(url)
End Sub

Protected Sub 
ExportToMarkdownButton_Click(sender As Object, e As EventArgs)
    RadEditor1.ExportToMarkdown()
End Sub
Protected Sub 
RadEditor1_ExportContent(sender As Object, e As EditorExportingArgs)
    
If File.Exists(path) Then
        
File.Delete(path)
    
End If

    
Using fs As FileStream File.Create(path)
        
Dim info As [Byte]() System.Text.Encoding.[Default].GetBytes(e.ExportOutput)
        fs.Write(info, 
0, info.Length)
    
End Using
    Response.Redirect(
"DefaultCS.aspx")
End Sub

Related Resources

<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.Markdown.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator runat="server" DecoratedControls="Buttons"/>
    <div class="demo-containers">
    <div class="demo-container">
        <ul class="inner-demo-container">
            <li>
                <asp:TextBox ID="MarkdownTextBox1" runat="server" TextMode="MultiLine" Width="680" Height="190"></asp:TextBox></li>
            <li>
                <input type="button" value="Import Markdown to RadEditor" onclick="telerikDemo.SetMarkdown();" />
                <asp:Button Text="Export Markdown from RadEditor" ID="ExportToMarkdownButton" runat="server" OnClick="ExportToMarkdownButton_Click" />
                <input type="button" value="Clean RadEditor's Content" onclick="telerikDemo.ResetContent();" /></li>
            <li>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="BasicTools.xml" Height="320px">
                            <ExportSettings FileName="Markdown" OpenInNewWindow="true"></ExportSettings>
                            <ImageManager ViewPaths="~/Editor/Img" />
                        </telerik:RadEditor>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </li>
        </ul>

        <script type="text/javascript">
            function pageLoad() {
                telerikDemo.init("<%=RadEditor1.ClientID%>", "<%=MarkdownTextBox1.ClientID%>", new Telerik.Web.UI.Editor.Markdown.Converter());
            }
        </script>
    </div>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Markdown export settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Header Style"
                                ID="RadioButtonListHeaderStyle" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonListHeaderStyle_SelectedIndexChanged">
                                <asp:ListItem Value="setex" Selected="True">setex - style headers are “underlined” using equal signs (for first-level headers) and dashes (for second-level headers)</asp:ListItem>
                                <asp:ListItem Value="atx">atx - style headers use 1-6 hash characters at the start of the line, corresponding to header levels 1-6</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Anchor Style"
                                ID="RadioButtonListAnchorStyle" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonListAnchorStyle_SelectedIndexChanged">
                                <asp:ListItem Value="markdown" Selected="True">markdown - convert to Markdown and loose non-convertible attributes</asp:ListItem>
                                <asp:ListItem Value="html">html - keep HTML syntax if non-convertible attributes are found</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Image Style"
                                ID="RadioButtonListImg" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonListImg_SelectedIndexChanged">
                                <asp:ListItem Value="markdown" Selected="True">markdown - convert to Markdown and loose non-convertible attributes</asp:ListItem>
                                <asp:ListItem Value="html">html - keep HTML syntax if non-convertible attributes are found</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Table Style"
                                ID="RadioButtonListTableStyle" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonListTableStyle_SelectedIndexChanged">
                                <asp:ListItem Value="breaktable" Selected="True">breaktable - break tables into one text paragraph for each cell</asp:ListItem>
                                <asp:ListItem Value="html">html - keep HTML syntax</asp:ListItem>
                            </qsf:RadioButtonList></li>
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Unparsables Style *"
                                ID="RadioButtonListUnparseablesStyle" runat="server" AutoPostBack="True"
                                OnSelectedIndexChanged="RadioButtonListUnparseablesStyle_SelectedIndexChanged">
                                <asp:ListItem Value="strip" Selected="True">strip - strip unparsable elements</asp:ListItem>
                                <asp:ListItem Value="html">html - keep HTML syntax</asp:ListItem>
                            </qsf:RadioButtonList>
                            <span>* (only for address, dl, fieldset, form, map, object, script, noscript)</span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?