New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Import and Export to Markdown

    • Show/Hide Border
    • Table Properties
    • Delete Table
    • Row
      • Insert Row Above
      • Insert Row Below
      • Delete Row
    • Column
      • Insert Column to the Left
      • Insert Column to the Right
      • Delete Column
    • Cell
      • Merge Cells Horizontally
      • Merge Cells Vertically
      • Split Cell Horizontally
      • Split Cell Vertically
      • Delete Cell
    • Cell Properties
    • Table Properties
    • Properties...
    • Image Map Editor
    • Properties...
    • OpenLink
    • Remove Link
    • Insert Select
    • Cut
    • Copy
    • Paste
    • Paste from Word
    • Paste Plain Text
    • Paste As Html
    • Paste Html
  • Configure Markdown export settings
  • Header Style

  • Anchor Style

  • Image Style

  • Table Style

  • Unparsables Style *

    * (only for address, dl, fieldset, form, map, object, script, noscript)

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

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
  • BasicTools.xml
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.Markdown.DefaultVB"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<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" />
    <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 RenderMode="Lightweight" 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>

Support & Learning Resources

Find Assistance