How to use FCKEditor in ASP.NET 2.0? ASP.Net IntegrationFCKeditor 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. PrerequisitesYou 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:
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845Step 1Suppose 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. You can find the last version here: http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125Step 2The 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:
- Manually copying the FredCK.FCKeditorV2.dll file to the "bin" directory of your web site.
- Right-clicking in "References" in your Visual Studio.Net project and select the FredCK.FCKeditorV2.dll file from the directory you have saved it.
- 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.
- 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 3Now 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:
- 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").
- 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form runat="server"> <FCKeditorV2:FCKeditor id="FCKeditor1" BasePath="~/FCKeditor/" runat="server" /> <br /> <input type="submit" value="Submit" runat="server" /> </form> </body></html>File Browser and Quick UploadFCKeditor 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. SamplesYou 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. Minimum Installation SampleThis is a fictitious structure of a ASP.Net web site using FCKeditor. As we can see, this site is composed by:
- The FredCK.FCKeditorV2.dll file, which has been downloaded from the FCKeditor.Net package and simply copied to the bin directory in the web site root. (See "Steps 1 and 2")
- The FCKeditor directory, where the editor scripts have been copied (from the FCKeditor core package). (See "Prerequisites")
- The UserFiles directory, where user uploaded files will be placed.
- A simple MyPage.aspx page that uses the editor, with the above sample code on it. (See "Step 3")
TipsYou 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:UserFilesPath" value="/Wherever/Directory/" /></appSettings>ASP.Net 1.1 and 2.0On 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 ThemesSpecial 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 codeSuppose 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/" & _teamNameEnd SubAdd an editor Dynamically in your codeif 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 "http://<host>/FCKEditor/". FCKeditor1.BasePath = Request.ApplicationPath + "/FCKEditor/";Add the control to the page: Dim fckeditor As New FredCK.FCKeditorV2.FCKeditorfckeditor.ImageBrowserURL = "http://localhost/virtualdir/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx"fckeditor.ID = "dynamicname"fckeditor.value = "the text you want in the FCK editor"fckeditor.SkinPath = "skins/silver/"fckeditor.ToolbarSet = "Default"myForm.Controls.Add(fckeditor)FCK in a user controlIn FCK 2.4, the instance name of a fck editor inside a user control will be its ClientID (the DOM id). In 2.3, it was the DOM name. Best Summarized Setup (For ASP.Net 2.0)1. Downloads
- download http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845
- download http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125
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 it3. put below in web.config file <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>4. Special note if you are using ASP.Net 2.0 and themes: you must open up a. "editor/filemanager/upload/aspx/upload.aspx" a. "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 "http://<host>/FCKEditor/".
FCKeditor1.BasePath = Request.ApplicationPath + "/FCKEditor/";
- Add the control to the page:
Dim fckeditor As New FredCK.FCKeditorV2.FCKeditorfckeditor.ImageBrowserURL = "http://localhost/virtualdir/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx"fckeditor.ID = "dynamicname"fckeditor.value = "the text you want in the FCK editor"fckeditor.SkinPath = "skins/silver/"fckeditor.ToolbarSet = "Default"myForm.Controls.Add(fckeditor) |
|
