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

File Managers

  • 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

The Telerik RadEditor dialogs are used to insert objects into the content area. These are the Image ManagerImage Manager, Flash ManagerFlash Manager, Document ManagerDocument Manager, Media ManagerMedia Manager and Template ManagerTemplate Manager dialogs (commonly named FileBrowser dialogs).

Note: Starting from Q1 2012, the Image Manager has a new default thumbnail mode. The old grid mode could be restored by setting ViewMode='Grid'.

You can enable the RadEditor's Dialogs by using one of the following approaches:

  • by manually adding the DialogHandler in your project's web.config file (in the httpHandlers section):<add verb="*" validate="false" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI"/>
  • by clicking on the Smart Tag of the RadEditor control in Visual Studio. Note that the smart tag will appear only if you have the Telerik.Web.Design.dll file in your project's bin folder or in the GAC.

The FileBrowser dialogs consist of a FileBrowser object, an object previewer/property manager and a file uploader tab. The FileBrowser provides the ability to browse directories and locate a file item. Once a file item is selected, it (or its properties) is loaded in the previewer.

The files which will be available in a FileBrowser dialog are controlled by a set of properties for each dialog.

All dialogs have the ViewPaths, UploadPaths and DeletePaths properties in common which can be set in the [DialogName] tag:

  • ViewPaths - Specifies the paths where files are located. The FileBrowser dialog displays recursively all the subdirectories and the appropriate files.
  • UploadPaths - Specifies the paths to which users can upload files. To be visible, these paths should be a subset (or child paths) of a ViewPaths value.
  • DeletePaths - Specifies the paths from which users can delete files. To be visible, these paths should be a subset (or child paths) of a ViewPaths value.<telerik:RadEditor runat="server" ID="RadEditor1">    <ImageManager ViewPaths="~/images" UploadPaths="~/images/New" DeletePaths="~/images/New/Articles,~/images/New/News"/>     <MediaManager ViewPaths="~/images" UploadPaths="~/images/New" DeletePaths="~/images/New/Articles,~/images/New/News"/>     <FlashManager ViewPaths="~/images" UploadPaths="~/images/New" DeletePaths="~/images/New/Articles,~/images/New/News"/>     <TemplateManager ViewPaths="~/images" UploadPaths="~/images/New" DeletePaths="~/images/New/Articles,~/images/New/News"/>     <DocumentManager ViewPaths="~/images" UploadPaths="~/images/New" DeletePaths="~/images/New/Articles,~/images/New/News"/> </telerik:RadEditor>

Note, that by design all FileManagers work with virtual paths to folders placed inside the Application root. If you want to access files and folders from a different location you will need to implement a custom FileBrowserContentProvider.

Related Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" CssClass="centered-editor">
            <Tools>
                <telerik:EditorToolGroup Tag="FileManagers">
                    <telerik:EditorTool Name="ImageManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="FlashManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="SilverlightManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="MediaManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="TemplateManager"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="ForeColor"></telerik:EditorTool>
                    <telerik:EditorTool Name="BackColor"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                    <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                SearchPatterns="*.jpeg,*.jpg,*.png,*.gif,*.bmp"
                EnableAsyncUpload="true" />
            <FlashManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                EnableAsyncUpload="true" />
            <MediaManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                EnableAsyncUpload="true" />
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                EnableAsyncUpload="true" />
            <TemplateManager ViewPaths="~/Editor/images/UserDir/Templates"
                UploadPaths="~/Editor/images/UserDir/Templates"
                DeletePaths="~/Editor/images/UserDir/Templates"
                SearchPatterns="*.html,*.html"
                EnableAsyncUpload="true" />
            <SilverlightManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                SearchPatterns="*.xap"
                EnableAsyncUpload="true" />
            <Content>
               <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are:
                <ul>
                    <li><em>Single-file, drag-and-drop deployment</em></li>
                    <li><em>Built on top of ASP.NET AJAX</em></li>
                    <li><em>Unmatched loading speed with new semantic rendering </em></li>
                    <li><em>Full keyboard accessibility</em></li>
                    <li><em>Flexible Skinning mechanism</em></li>
                    <li><em>Simplified and intuitive toolbar configuration</em></li>
                    <li><em>Out-of-the-box XHTML-enabled output</em></li>
                </ul>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance