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

    Import and Export to RTF

    Words: 121   Characters: 895 
     
    • Demo Configurator
    Export Settings
    • Spin UpSpin Down
    • Spin UpSpin Down
    Import Settings
      • Upload
        Drop files here

    The demo shows the Import and Export from/to RTF feature of the RadEditor control.

    Since Q3 2014 the RadEditor control offers built-in integration with the Telerik document processing libraries that provide the import and export from/to RTF feature.


    Enabling the Import and Export from/to RTF feature

    To enable the Import and Export from/to RTF feature, you should reference the Telerik document processing assemblies. You can find more details about the process in the Export to DOCX and RTF article.


    Importing RTF content

    You can import RTF content in the Editor via its LoadRtfContent() server method and, optionally, fine tune the imported content via the Import Settings.

    By default, the generated HTML content is not a full HTML page (i.e., it does not begin with the <html> tag, but with generic tags like <p>), the images are converted to a base64 string and the document styling (e.g., text colors and fonts) is stored in a <style> tag in the content.

    You can get a full HTML page in the editor (i.e., content that begins with the <html> tag) by setting the Document Level Import setting to Document.

    You can store the imported images in a folder under the application by setting the Images Mode Import property to External and the ImagesFolderPath property points to the desired path. You can see them in the Image Manager dialog -

    You can control where the document styling is stored through the Styles Mode Import setting. If you set it to External, the generated CSS rules are written in a file if your choice (ImportedStyles.css is the file we have chosen for this demo). You can control which file from the application is used via the StylesFilePath and StylesSourcePath properties..


    Exporting to an RTF file

    To export the current editor content, you can call the ExportToRtf() server method and fine tune the exporting via the Export Settings.

    Optionally, you can set the default font name and size for the exported document through the DefaultFontName and DefaultFontSizeInPoints Export settings.

    You can also add a header and predefine its size via the PageHeader and HeaderFontSizeInPoints Export settings.

    If you are interested in the Import and Export from/to DOCX feature, you can navigate to the Import and Export to DOCX demo.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    • ImportedStyles.css
      • ImportedStyles.css
      • styles.css
    <%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.RTFImportExport.DefaultCS"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!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 src="Scripts.js" type="text/javascript"></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">
            <div class="errorLog">
                <asp:Label runat="server" ID="ImportErrorLog" CssClass="importErrorLog" />
                <asp:Label runat="server" ID="ExportErrorLog" CssClass="exportErrorLog" />
            </div>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Height="675px" ContentFilters="PdfExportFilter, DefaultFilters" CssClass="centered-editor">
                <ImageManager ViewPaths="~/Editor/Examples/Import-Export/RTF-Import-Export/images" />
                <ExportSettings>
                    <Rtf DefaultFontName="Arial" DefaultFontSizeInPoints="12" HeaderFontSizeInPoints="20" PageHeader="RadEditor" />
                </ExportSettings>
                <ImportSettings>
                    <Rtf DocumentLevel="Fragment" ImagesFolderPath="images" ImagesMode="Embedded" ImagesSourceBasePath="images/" StylesFilePath="ImportedStyles.css" StylesMode="Embedded" StylesSourcePath="ImportedStyles.css" />
                </ImportSettings>
            </telerik:RadEditor>
        </div>
        </div>
        <script type="text/javascript">
            function pageLoad() {
                RTFImportExportDemo.initialize($telerik.$, "<%= ImportRtf.ClientID %>", "exportErrorLog", "importErrorLog");
            }
        </script>
     
        <qsf:ConfiguratorPanel runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn runat="server" ID="ExportSettins" Title="Export Settings" Size="Wide">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox runat="server" ID="ListOfFonts" EmptyMessage="Select export font"
                                    Label="Default Font Name" MaxHeight="400px">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox runat="server" ID="rntbDefaultFontSize" Label="Default Font Size In Points"
                                    Width="370px" LabelWidth="210px" NumberFormat-DecimalDigits="0" MinValue="12">
                                </qsf:NumericTextBox></li>
                            <li>
                                <qsf:NumericTextBox runat="server" ID="rntbHeaderFontSize" Label="Header Font Size In Points"
                                    Width="370px" LabelWidth="210px" NumberFormat-DecimalDigits="0" MinValue="12">
                                </qsf:NumericTextBox></li>
                            <li>
                                <qsf:TextBox runat="server" ID="rtbPageHeader" Text="RadEditor" Label="Page Header"
                                    Width="370px" LabelWidth="210px">
                                </qsf:TextBox></li>
                            <li>
                                <qsf:Button Text="Export To RTF" runat="server" ID="ExportToRTF" OnClick="ExportToRTF_Click" />
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" ID="ImportSettings" Title="Import Settings" Size="wide">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox runat="server" ID="rcbDocumentLevel" Label="Document Level">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <qsf:ComboBox runat="server" ID="rcbImagesMode" Label="Images Mode">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <qsf:ComboBox runat="server" ID="rcbStylesMode" Label="Styles Mode">
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <label class="label">Upload RTF file</label>
                                <telerik:RadAsyncUpload RenderMode="Lightweight" ID="rtfUpload" runat="server" AllowedFileExtensions=".rtf" Width="320px"
                                    UploadedFilesRendering="BelowFileInput" MaxFileSize="2097152" MaxFileInputsCount="1" Skin="MetroTouch"
                                    OnClientFileUploaded="OnClientFileUploaded" OnClientFileUploadRemoved="OnClientFileUploadRemoved"
                                    CssClass="upload">
                                    <Localization Select="Upload" />
                                </telerik:RadAsyncUpload>
                            </li>
                            <li>
                                <qsf:Button ID="ImportRtf" Text="Import Selected RTF File" runat="server" OnClick="ImportRtf_Click" />
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance