Revision as of 15:36, 5 January 2008

It is very easy to use FCKeditor in your ASP.NET web pages. Just follow these steps.

Integration step by step

Step 1

First step you should take in order to integrate FCKeditor with ASP.NET environment is downloading the FCKeditor .Net package from our dowlnoad site. You can find the latest version of the package under this address:

http://www.fckeditor.net/download

Note: The main code is not included in this package, just the ASP.NET Control. You still need the FCKeditor scripts to be able to run it, so you should download it as well

Step 2

Unpack the downloaded file. There you will find the original source code of the control and a compiled version of it. The file is called FredCK.FCKeditorV2.dll. You can find it in two catalogs:

• bin/Release/1.1/ - the version designed for ASP.NET 1.1
• bin/Release/2.0/ - the version designed for ASP.NET 2.0

You most probably will not need to make changes in the source, so just consider the compiled DLL file, and just create a reference to it in your project. You have two options to do that:

1. Manually copy the FredCK.FCKeditorV2.dll file to the "bin" directory of your web site.
2. Right-click "References" in your Visual Studio.NET project in the "Solution Explorer". Use "Browse" to select the FredCK.FCKeditorV2.dll file from the directory you have saved it in.

You can include the control in your Visual Studio.NET controls toolbox. Just right-click on it and select "Choose Items". Then, just point to the FredCK.FCKeditorV2.dll file by using the "Browse" option. Remember to make sure that you have the latest version of the dll. It may be worthwhile to recompile from the source if you are having issues getting the upload and connector features to work.

Step 3

Now the editor is ready to be used in your site, so just create an ASP.NET page. To create an instance of the editor, you have two options:

1. Drag and drop the control "FCKeditor" from the toolbox to you page.(this method will only work if you included the "FCKeditor" control in the toolbox - see Step 2 for the description)
2. Manually add lines of code in your ASP.NET source page:

• Include this line in the top of the page:

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

• Add the editor tag inside the <form runat="server">:

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"></FCKeditorV2:FCKeditor>

Step 4

The editor is now ready to be used. Just open the page in your browser to see it at work.

NOTE: The steps written above are essential to integrate the FCKeditor in your page. However there are some steps you should take to configure the editor more properly:

Step 5

FCKeditor comes with a default File Browser that makes it easy to user to upload files and images to the server, as well as browse the available files for reuse. It is also available a "Quick Upload" feature to quickly upload files and create links for them. This default system is integrated with all server side languages supported by FCKeditor. You just need to make a simple configuration to indicate which one you are using. To do that for ASP.NET, just open the fckconfig.js file in the directory where you have copied the FCKeditor core package. Look for the _FileBrowserLanguage and _QuickUploadLanguage entries and set their values to aspx :

var _FileBrowserLanguage = 'aspx' ;
var _QuickUploadLanguage = 'aspx' ;

You must prepare your site to accept the uploaded files and their relative directory. structure. By default FCKeditor.Net will look for the UserFiles directory in the root of the web site, and place all files there. So, just create that directory.

Step 6

You can set the default UserFiles path in your web.config file, so it will be set to all FCKeditor instances you use in your web site:

<appSettings>
<add key="FCKeditor:BasePath" value="[path where editor is]" /> /*FCKeditor's path */
<add key="FCKeditor:UserFilesPath" value="[path users upload files]" /> /*User Files path */
</appSettings>

Step 7

If you are using ASP.NET 2.0 open:

• "editor\filemanager\connectors\aspx\upload.aspx"
• "editor\filemanager\connectors\aspx\connector.aspx"

and modify the first line to add Theme=""and StylesheetTheme="" as follows:

<%@ Page language="c#" Trace="false" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" Theme="" StylesheetTheme="" %>

Sample Code

<%@ Page Language="C#"%>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sample Page</title>
</head>
<body>
<form id="form1" runat="server">

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
</FCKeditorV2:FCKeditor>

<div>
</div>
<input type="submit" value="Submit" runat="server" />
</form>
</body>
</html>

Additional information

• You can find some samples on how to use the editor in the "_samples/aspx" directory of the FCKeditor.Net distribution package. To install the samples, just copy that directory to the _samples directory found in the FCKeditor core package installation.