Example Showing Use of Editor

Example showing use of Editor:

In this example we would show how to integrate and use FCKEditor in your .NET applications.

Why FCKEditor:

FCKEditor is one of the most popular and widely used editor in most of the web applications. It is an Online text editor (DHTML editor) which can be used by web applications developed in any languages like ASP, ASP.NET, ColdFusion, PHP, Java. It uses JavaScript that brings to the web many of the powerful features of known desktop editors like Word. It's XHTML compliant and works with Firefox, Mozilla, Netscape and IE browsers. Along with this the important point is that it is available freely i.e. No costs involved.

Installation of FCKEditor along with integration in ASP.NET:

FCKEditor is freely available on the Internet. One can download the FCKEditor sourcefiles and can integrate into different technology i.e ASP, .NET, PHP. FCKeditor is a JavaScript application that runs in the browser. You can use it without any kind of strict server side integration, if you want. But, a more clean and powerful way to use it, is by choosing a server side integration package that fit your needs.

For ASP.Net, a parallel package is available to make it possible to use FCKeditor as any other control on WebForms. This package is called FCKeditor.Net. It is very easy to use FCKeditor in your ASP.Net web pages.

Just follow these steps.

Prerequisites:

You must have downloaded and installed (copied it in your web site) the latest version of FCKeditor editor before proceeding with these steps. The FCKeditor.Net package doesn't include the core of the editor (JavaScript scripts to be placed in the /FCKeditor/ directory of your site).

You can download it from the following URL: Download Basic Editor Files

Step 1

Suppose that the editor is installed in the "/FCKeditor/" path of your web site. Now you need to download the FCKeditor ASP.Net Control DLL to use in your pages.

Can download the latest version from the following URL: Download FCKEditor ASP.NET Control dll

Step 2

The downloaded ZIP file contains the original source code of the control and a compiled version of it (the "bin/Release/FredCK.FCKeditorV2.dll" file"). 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 copying the FredCK.FCKeditorV2.dll file to the "bin" directory of your web site.

2) Right-clicking in "References" in your Visual Studio.Net project and select the FredCK.FCKeditorV2.dll file from the directory you have saved it.

3) You can include the control in your Visual Studio.Net controls toolbox. Just right-click on it and select "Add/Remove Items...". Then, just point to the FredCK.FCKeditorV2.dll file.

4) 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 a ASP.Net page and, to create an instance of the editor, you have two options:

1. Just drag and drop the control in your page from the toolbox (if you have
added it to the toolbox as described at "Step 2").

2. Include the following line in the top of your ASP.Net page source:

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

And then adding the editor tag inside a <FORM runat="server">:

<FCKeditorV2:FCKeditor id="FCKeditor1" BasePath="~/FCKeditor/" runat="server" />

Note: That the BasePath property points to the directory where the FCKeditor scripts have been copied.

The complete sample:

<%@ Page ValidateRequest="false" Language="VB" AutoEventWireup="false" %> <%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %> <html>

<head>

<title>FCKeditor - Sample</title>

</head>

<body>

<FCKeditorV2:FCKeditor id="FCKeditor1" BasePath="~/FCKeditor/" runat="server" />

</form>

</body>

</html>

File Browser and Quick Upload:

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'.

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.

Important: You must grant the necessary privileges to the ASPNET and/or IUSR_<ComputerName> users to be able to write files and create directories in the UserFiles directory.

Tips:

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>

ASP.Net 1.1 and 2.0:

On the pages where FCKeditor has to be included, it's recommended to set the ValidateRequest property of the Page directive to false: <%@ Page Language="VB" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" ValidateRequest="false" %>

This is because some input created by the editor may be considered dangerous by the .Net Framework.

ASP.Net 2.0 and Themes:

Special note if you are using ASP.Net 2.0 and themes: You must open up "editor\filemanager\upload\aspx\upload.aspx" and "editor\filemanager\browser\default\connectors\aspx\connector.aspx" and modify the first line to add Theme=""and StylesheetTheme="" as follows: <%@ Page Language="VB" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" StylesheetTheme="" %>

Changing the UserFilesPath by code:

Suppose you would like to modify the location of user uploaded files. You can do so without dynamically adding the control, but you should do so in the page init, not the page load. For example, here is an example which uses files for each team in the same directory: Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

Session("FCKeditor:UserFilesPath") = "~/App_Images/" & _teamName

End Sub

Add an editor Dynamically in your code

If you use an application method (virtual directory), then set the Base path in the web.config file:

For example if this is your FCKeditor path "c:/inetpub/wwwroot/virtualdir/FCKeditor/" add this:

<add key="FCKeditor:BasePath" value="~/FCKeditor/" />

I use a session to set the filebrowsers path, Add the session variable before you make the control

Session("FCKeditor:UserFilesPath") = "/virtualdir/userfiles/"

I use the request object in order to establish the correct BasePath. I suppose that the correct path is on "

FCKeditor1.BasePath = Request.ApplicationPath + "/FCKEditor/";

Add the control to the page:

Dim fckeditor As New FredCK.FCKeditorV2.FCKeditor

fckeditor.ImageBrowserURL = ""

fckeditor.ID = "dynamicname"

fckeditor.Value = "the text you want in the FCK editor"

fckeditor.SkinPath = "skins/silver/"

fckeditor.ToolbarSet = "Default"

myForm.Controls.Add(fckeditor)

Best Summarized Setup (For ASP.Net 2.0):

1. Get or download

a) has editor file (xml files & configuration files)

b) this has asp.net 2.0 DLL in it (and aspx examples)

2. Minimum Install Setup

a. Locate FredCK.FCKeditorV2.dll and put in your bin directory (from b's download)

b. Create a directory for FCKeditor and put the core files from there (from a's download)

c. Create a directory for UserFiles and change the rights of this folder so internet users can modify it

3. put below in web.config file

<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>

4. Special note if you are using ASP.Net 2.0 and themes: you must open up

a. "editor\filemanager\upload\aspx\upload.aspx"

b. "editor\filemanager\browser\default\connectors\aspx\connector.aspx"

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

<%@ Page Language="VB" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" StylesheetTheme="" %

5. Add below to every page that will use FCKeditor

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

also set ValidateRequest to false like below.

<%@ Page Language="VB" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" ValidateRequest="false" %>

6. To Add Editor dynamically by code: if you use an application method (virtual directory), then set the Base path in the web.config file: For example if this is your FCKeditor path "c:/inetpub/wwwroot/virtualdir/FCKeditor/" add this: <add key="FCKeditor:BasePath" value="~/FCKeditor/" />

I use a session to set the filebrowsers path, Add the session variable before you make the control (USEFUL WHEN DYNAMIC DIRECTORIES ARE NEEDED) Session("FCKeditor:UserFilesPath") = "/virtualdir/userfiles/"

I use the request object in order to establish the correct BasePath. I suppose that the correct path is on " FCKeditor1.BasePath = Request.ApplicationPath + "/FCKEditor/";