Editor - Custom File Dialogs Content Provider

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.
   
Isolate this demo as a stand-alone application

Database File Provider

This example demonstrates the implementation of a custom FileBrowserContentProvider, using a SQL database as a file source. In the offline demos instalation the DBContentProvider class is available in the App_Code\Editor\ folder or in this code library.

Custom FileBrowserContentProvider implementation allows using virtually any type of file sources for the FileBrowser dialogs (Image Manager, DocumentManager, Media Manager, Flash Manager, Template Manager):

  • Database
  • Custom role-based CMS system
  • Web service
  • Applications which use URL Rewriters
The DBFileBrowserContentProvider class inherits the abstract Telerik.Web.UI.Widgets.FileBrowserContentProvider class and implements its abstract members:
  • ResolveRootDirectoryAsTree- Called in order to load all subfolders of the passed as parameter folder
  • ResolveDirectory - Called in order to load all files of the passed as parameter folder
  • StoreFile - called to save an uploaded file to the storage
  • DeleteFile - called when user deletes a file
  • DeleteDirectory - called when user deletes a directory
  • CreateDirectory - called when user creates a directory
  • CanCreateDirectory - a readonly property, which value identifies if the New Directory icon will exist in the FileBrowser
  • GetFile - used in two cases: 1) to identify if a file with the same name exists in the same path when uploading a file; 2) when creating a thumbnail used to get the original image content
  • StoreBitmap - used to save a newly created bitmap to the storage
  • GetFileName - used to return the name of a file with given URL
  • GetPath - used to return the path of an item (file or directory) with given URL

DBFileBrowserContentProvider uses a helper DataServer class, designed to handle the database operation functions.

The file content is stored in the database and is served by the content-streamer Handler.ashx file.

Related Resources

<%@ Page Theme="Default" Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true"    Inherits="Telerik.Web.Examples.Editor.DBFileBrowserContentProvider.DefaultCS" %>

<%@ 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" />
    <div class="demo-container size-wide">
        <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="./DBFileBrowserContentProvider.xml" Width="800px">
            <Content>
            <img alt="" src="../../../Editor/Examples/DBFileBrowserContentProvider/Handler.ashx?path=Root%252fImages%252fNature%252fFruits%252f320155_1886Thumbnail.jpg" />
            - The custom content provider provides a complete abstraction for files/folders in the file browser dialogs of the editor. 
            <br /><br />This means that the user can create folders, upload, move, delete files and everything will be stored in a single table in the database. No physical files or folders will be created on the server. Accessing
                        the files from the database is performed with a HTTP handler (<em>Handler.ashx</em>). 
            <br /><br />If the user uploaded an image to the database and then inserted it 
                        in the editor, the image's URL will look in a similar way (so the browser makes a request for the HTTP Handler):
            <br /><strong>Handler.ashx?path=Root%252fImages%252fNature%252fFruits%252f320155_1886Thumbnail.jpg</strong>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?