Making full use of the FCKeditor control

retroviz · June 7th, 2008, 10:30 AM

In the book Marco makes the decision to disable the file browser built into the FCKeditor control due to the fact that a) you had just created your own fileupload control and b) security reasons.

The security is a valid point as the file browser included with FCK editor does give you much control over the directories on your server than the simple upload control in the book. However, having used FCKeditor in many different projects I have found the built in file browser to offer a much easier interface for the EU.

My CMS has a resources (downloads) area for each article. In many cases clients may wish to batch upload files to a directory using FTP and then select and add the resources to an article in the CMS. This is not achieved very easily using the normal upload control.

[u]Prerequisites</u>
You obviously need FCKeditor installed on your site. To download go to http://www.fckeditor.net/. I would recommend downloading the latest version even if you are not going to use the file browser as there have been some significant improvements since the version used in the book (this article presumes you are using the latest version)

[u]Enabling the file browser</u>
By default, the file browser is disabled. To enable open:
"FCKeditor/editor/filemanager/connectors/aspx/config.ascx">~/Controls/FCKeditor/editor/filemanager/connectors/aspx/config.ascx"

Look at the function "CheckAuthentication()". As the comment states, you should not simply return true. Although the fact that your FCKeditor control is contained within the admin folder which should prevent non-authenticated users accessing it, in my case I return the following:

Code:

return HttpContext.Current.User.Identity.IsAuthenticated;

This suits my needs but you could quite easily use:

Code:

return HttpContext.Current.User.IsInRole("Administrators");

if you wanted to restrict using the browser to a certain role(s).

Next thing that seems to stumble a lot of people (unless you read the documentation) is that you need to set the Theme property of Connector.aspx and Upload.aspx (in the connectors/aspx folder) to nothing. So in the page declaration:

Code:

<%@ Page Language="c#" Trace="false" Inherits="FredCK.FCKeditorV2.FileBrowser.Connector" AutoEventWireup="false" Theme=""%>

You only need to do this if you are using ASP.net themes which of course in TBH, we are.

[u]Setting your uploads location</u>

By default, FCK editor will look for a "userfiles" directory in the root of your site to upload files to. It then creates a folder within that directory for each content type (File, Image, Flash, Media). These content folders are created dynamically when you first run the filebrowser.

If you wish to change your User Files Path you can do so in web.config. You can also change the BasePath of FCKeditor so that you can move it into somewhere more logical such as "~/Controls"

Code:

  <appSettings>
    <add key="FCKeditor:BasePath" value="~/Controls/FCKeditor/"/>
    <add key="FCKeditor:UserFilesPath" value="~/Resources"/>  
  </appSettings>

If you have changed the location of FCKeditor and updated the BasePath in web.config but are still getting an error, then check the "dvwArticle_ItemCreated" event in /Admin/AddEditArticle.aspx as the location of the FCKeditor directory is set explicitly here.

At this point, providing you have created your root User Files Path (in my case ~/Resources), and you have sufficient permissions on that directory, you should be able to open up the filemanager from either the Insert Image dialog box or the Insert Link dialog box by clicking "Browse Server".

You can now upload new files to your server or select existing ones by choosing the relevant content category and clicking your filename to return the URL (very handy if you have been unfortunate enough to create your articles on a different domain so now all your absolute links are wrong :))

[u]What about the Category Administration</u>

The above may not be anything new to many people. It's great that we can use the file browser when creating articles, but what about in areas where you need to upload/choose a file but don't need the FCKeditor.

This is something that could be quite anoying in Category administration if you uploaded an image and forgot to copy the filename in or deleted a category and can't remember what the image was called to use it again.

This is one solution and uses the file browser built into FCKeditor. Note that this "hack" is not supported by FCKeditor but is mentioned on their Wiki as a solution.

1) Download the pick.js file from https://sourceforge.net/tracker/inde...48&atid=543655

2) Put this file somewhere on your site e.g. /Scripts/pick.js

3) Essentially all this does is make a call to the browser just like when you click the "Browse Server" button within FCKeditor. Only problem is, if you are using a newer version of FCKeditor (where the connectors are no longer in the Browser/Default directory) it will not work. In that case open pick.js and change the OpenServerBrowser call to below. Yours may be different depending on the location of your FCKeditor folder.

Code:

    OpenServerBrowser(
        '/YourWebSiteName/Controls/FCKEditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=../../connectors/aspx/connector.aspx',
        screen.width * 0.7,
        screen.height * 0.7 ) ;

4) Note the "Type=Image". You will need to change this if you wish to browse a different file type.

5) Now we can test. Open up Admin/ManageCategories.aspx and add a link to the js file (the location of your js file may be different, best way to get it right is to drag the file onto your code):

Code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="../../Scripts/pick.js" type="text/javascript"></script>
</asp:Content>

6) Next step is to create a control to open the browser (a button) and find a control to return the URL to. Since the txtImageUrl textbox is already used for adding/displaying the ImageUrl then we will return the Url of the selected image to this. Add a button next to the txtImageUrl textbox:

Code:

<EditItemTemplate>
<asp:TextBox ID="txtImageUrl" runat="server" Text='<%# Bind("ImageUrl") %>' MaxLength="256"Width="60%" />&nbsp;&nbsp;
<asp:Button ID="btnBrowse" runat="server" Text="Browse"/>
</EditItemTemplate>

7) Next is to attach the the javascript function to the click event of our button, and pass the client ID of our txtImageUrl control. You can do this in the Page_Load event:

Code:

        
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim strJScript As String = _
String.Format("BrowseServer('{0}'); return false;", _
dvwCategory.FindControl("txtImageUrl").ClientID)

            Dim btnBrowse As Button = CType(dvwCategory.FindControl("btnBrowse"), Button)
            btnBrowse.Attributes.Add("onclick", strJScript)
End Sub

8) And thats it. Reload your page and click on the Browse Button. It should launch the file browser. Click on a file and the URL should be returned to your txtImageUrl textbox.

Hope that helps people. I will post a better article with screen shots once my site is up and running.

Note: You could also attach the function to the OnClientClick property of your Button. I chose to this programatically but it did mean I had to "return false;" after calling my jscript function to prevent a page postback.

retroviz · June 22nd, 2008, 07:04 AM

just found a problem with this when using asp validation controls. You need to set CausesValidation="False" on your button used to launch the file browser.