Editor - Save in External File

Test.html will be open in a new window

  • 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can save the RadEditor content in an external text or HTML file as well as load the content from an external file in the editor by following the instructions below:

  1. Create an HTML file (test.html) in the root of your web application
  2. Declare RadEditor and an Asp.NET button in your page:
    <telerik:radeditor runat="server" ID="RadEditor1" ></telerik:radeditor>
    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
  3. To save the RadEditor content in the external HTML file when the Submit button is pressed, add the following code inside the button click eventhandler in the codebehind:
    C#
    protected string path = "test.html"; //specify the path to your file
    ...
    protected void Button1_Click1(object sender, EventArgs e)
    {
    //Open file for writing and write content
    using (StreamWriter externalFile = new StreamWriter(this.MapPath(path), false))
    {
    externalFile.Write(RadEditor1.Content)
    ;
    }
    }
    VB.NET:
    Protected path As String = "test.html"
    ...
    'specify the path to your file
    Protected Sub Button1_Click1(ByVal sender As Object, ByVal e As EventArgs)
    'Open file for writing and write content
    Using externalFile As New StreamWriter(Me.MapPath(path), False)
    externalFile.Write(RadEditor1.Content)
    End Using
    End Sub
  4. To load the external file content in the RadEditor, read the file content with the ReadFile function and assign the returned string to the Html property of RadEditor in the Page_Load event:
    C#
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!Page.IsPostBack)
    {
    RadEditor1.Content
    = ReadFile(Server.MapPath(path));
    }
    }

    protected string ReadFile(string path)
    {
    if (!System.IO.File.Exists(path))
    {
    return string.Empty;
    }
    using (System.IO.StreamReader sr = new System.IO.StreamReader(path))
    {
    return sr.ReadToEnd();
    }
    }

    VB.NET
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not Page.IsPostBack Then
    RadEditor1.Content = ReadFile(Server.MapPath(path))
    End If
    End Sub

    Protected Function
    ReadFile(ByVal path As String) As String
    If Not
    System.IO.File.Exists(path) Then
    Return String
    .Empty
    End If
    Using sr As New System.IO.StreamReader(path)
    Return sr.ReadToEnd()
    End Using
    End Function

Related Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="FormDecorator1" DecoratedControls="Buttons" />
    <div class="demo-containers">
    <div class="demo-container">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <asp:Button ID="Button1" runat="server" Text="Save to File" OnClick="Button1_Click1"></asp:Button>
            Test.html will be open in a new window
            <br />
            <br />
        <telerik:RadWindow RenderMode="Lightweight" Title="Saved content" NavigateUrl="test.html" VisibleOnPageLoad="false"
            ReloadOnShow="true" Skin="Default" runat="server" Behaviors="Maximize,Close,Move"
            ID="RadWindow1" VisibleStatusbar="false" Width="700px" Modal="true" Height="500px">
        </telerik:RadWindow>
        </telerik:RadAjaxPanel>
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools"
            Width="735px">
        </telerik:RadEditor>
    </div>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?