Integrating WebFileManager with ckEditor 4

Overview

This article provides a guide on integrating WebFileManager with http://ckeditor.com/">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 VB.net.

Step 1: Standalone Web Form

A new ASP.net 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:

CKEDITOR.replace(
  getCKHtmlControlId(),
	  {
		  filebrowserBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx',
		  filebrowserImageBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx?type=Images',
		  filebrowserFlashBrowseUrl: getWebFileManagerPath() + '/ckEditorWebFileManager.aspx?type=Flash'
	  }
);