Editor

Controls

All Controls

Editor

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

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
HeaderStyle:
AnchorStyle:
ImgStyle:
TableStyle:
UnparseablesStyle (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
C# VB
Show code in new window Demo isolation steps
<%@ 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>Markdown features of ASP.NET Html Editor control | RadEditor Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <div style="float: left;">
          <asp:TextBox ID="MarkdownTextBox1" runat="server" TextMode="MultiLine" Width="680" Height="190"></asp:TextBox>
          <br />
          <br />
          <input type="button" value="Import Markdown to RadEditor" onclick="SetMarkdown();" />
          <asp:Button Text="Export Markdown from RadEditor" ID="ExportToMarkdownButton" runat="server" OnClick="ExportToMarkdownButton_Click" />
          <input type="button" value="Clean RadEditor's Content" onclick="ResetContent()" />
          <script type="text/javascript">
               function SetMarkdown()
               {
                    //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));
          }

          function ResetContent()
          {
               var editor = $find("<%=RadEditor1.ClientID%>");
               editor.set_html("");
          }
          </script>
          <br />
          <br />
          <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>
     </div>
     <div style="margin-left: 30px; float: left;">
          <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure Markdown export settings"
               Expanded="true" Style="text-align: left;" HorizontalAlign="Right" Width="300">
               <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                         <div style="padding: 5px;">
                              <strong>HeaderStyle:</strong>
                              <asp:RadioButtonList RepeatDirection="Vertical" Width="300px" CellPadding="0" CellSpacing="0"
                                   CssClass="text" 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>
                              </asp:RadioButtonList>
                         </div>
                         <div style="padding: 5px;">
                              <strong>AnchorStyle:</strong>
                              <asp:RadioButtonList RepeatDirection="Vertical" Width="300px" CellPadding="0" CellSpacing="0"
                                   CssClass="text" 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>
                              </asp:RadioButtonList>
                         </div>
                         <div style="padding: 5px;">
                              <strong>ImgStyle:</strong>
                              <asp:RadioButtonList RepeatDirection="Vertical" Width="300px" CellPadding="0" CellSpacing="0"
                                   CssClass="text" 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>
                              </asp:RadioButtonList>
                         </div>
                         <div style="padding: 5px;">
                              <strong>TableStyle:</strong>
                              <asp:RadioButtonList RepeatDirection="Vertical" Width="300px" CellPadding="0" CellSpacing="0"
                                   CssClass="text" 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>
                              </asp:RadioButtonList>
                         </div>
                         <div style="padding: 5px;">
                              <strong>UnparseablesStyle</strong> (only for address, dl, fieldset, form, map, object, script, noscript)<strong>:</strong>
                              <asp:RadioButtonList RepeatDirection="Vertical" Width="300px" CellPadding="0" CellSpacing="0"
                                   CssClass="text" ID="RadioButtonListUnparseablesStyle" runat="server" AutoPostBack="True"
                                   OnSelectedIndexChanged="RadioButtonListUnparseablesStyle_SelectedIndexChanged">
                                   <asp:ListItem Value="strip" Selected="True">strip - strip umparsable elements</asp:ListItem>
                                   <asp:ListItem Value="html">html - keep HTML syntax</asp:ListItem>
                              </asp:RadioButtonList>
                         </div>
                    </ContentTemplate>
               </asp:UpdatePanel>
          </qsf:ConfiguratorPanel>
     </div>

    </form>
</body>
</html>