This website uses cookies We use cookies on this website to provide services, features and to analyze our traffic. You consent to our cookies if you continue to use our website. Accept Cookies Find out more

Integrating WebFileManager with ckEditor 4

KB236 Last reviewed 03 August 2015
How to integrate WebFileManager with ckEditor.


This article provides a guide on integrating WebFileManager with ckEditor 4 using WebForms. It is assumed that WebFileManager has already been installed and configured within your ASP.Net web application.

All code samples in this article are in

Step 1: Standalone Web Form

A new web form is required to host WebFileManager.

1. Create a new WebForm within your ckEditor folder called ckEditorWebFileManager.aspx

2. In the HTML view, add an ASP.Net ScriptManager reference to the page with the EnablePartialRendering property set to true.

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"/>

3. Add the reference to the WebFileManager user control

<%@ Register Src="~/App/Components/WebFileManager/WebFileManager.ascx" TagPrefix="user" TagName="WebFileManager" %>

4. Add the WebFileManager control

 <user:WebFileManager runat="server" ID="WebFileManager" />

5. In the code-behind, define the configuration variables for WebFileManager in the Load event. Ensure that the OperatingMode variable is set to ckEditor (see example below).

For example:

' Core
WebFileManager.Config.BaseFolderPath = Request.AppRelativeCurrentExecutionFilePath
WebFileManager.Config.OperatingMode = CalzadaMedia.WebFileManager.WfmOperatingMode.ckEditor
WebFileManager.Config.LogPolicy = CalzadaMedia.WebFileManager.LogPolicy.ErrorsOnly

' Generic IO
WebFileManager.Config.FileSystemObjectCopy = True
WebFileManager.Config.FileSystemObjectMove = True

' File
WebFileManager.Config.FileDelete = True
WebFileManager.Config.FileRename = True
WebFileManager.Config.FileUploadMode = CalzadaMedia.WebFileManager.WfmFileUploadMode.Plupload
WebFileManager.Config.FileDownload = True

' Folder
WebFileManager.Config.FolderCreate = True
WebFileManager.Config.FolderDelete = True
WebFileManager.Config.FolderRename = True

' UI
WebFileManager.Config.ListingMode = CalzadaMedia.WebFileManager.WfmListingMode.Thumbnail
WebFileManager.Config.ImageRotation = True
WebFileManager.Config.ImageLightbox = True

' Session
WebFileManager.Config.RememberLastPath = True
WebFileManager.Config.ManagerIdent = Session.SessionID

Step 2: Configuring ckEditor

1. In the code-behind add the following code to be executed during the PreRender event.

Dim jsWebFileManagerPath As String = String.Format("function getWebFileManagerPath() {{ return '{0}';  }};", ResolveUrl("~/App/Components/ckEditor"))
Page.ClientScript.RegisterClientScriptBlock(Me.[GetType](), "jsWebFileManagerPath", jsWebFileManagerPath, True)

In the above code, the value ~/app/components/ckEditor should be changed to the Url of the webform containing ckEditor.

2. In HTML, alter the ckEditor configuration to specify values for fileBrowserUrl, filebrowseImageBrowseUrl, filebrowserFlashBrowseUrl. For example:

		  filebrowserBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx',
		  filebrowserImageBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx?type=Images',
		  filebrowserFlashBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx?type=Flash'

 Loading ...