FCKeditor is the most popular online HTML text editor and widely used in most of the web sites. It comes with an FCKeditor.NET control exclusively for ASP.NET applications. However there are no proper instructions or tutorial on how to integrate the FCKeditor into your ASP.NET websites. To integrate the FCKeditor.NET control you need the FCKeditor main code files and FCKeditor.NET control dll file.
FCKeditor is the most popular online HTML text editor and widely used in most of the web sites. It comes with an FCKeditor.NET control exclusively for ASP.NET applications. However there are no proper instructions or tutorial on how to integrate the FCKeditor into your ASP.NET websites. To integrate the FCKeditor.NET control you need the FCKeditor main code files and FCKeditor.NET control dll file.
Steps to integrate FCKEDITOR into asp.net website.
1. Download FCKEDITOR AND FCKEDITOR .NET CONTROL from the FCKEDITOR site. You can download from the following link http://www.fckeditor.net/download
2. You require both the compressed files to integrate in your asp.net website.
3. Extract the both the compressed files into a separate folder.
3. Create a new website namely FCKEDITOR through VWD Express or Visual Studio.
4. Add asp.net Bin folder in your FCKEDITOR website.
5. From the extracted FCKeditor.Net_2.6.3 files copy the FFredCK.FCKeditorV2.dll file available in the FCKeditor.Net_2.6.3\bin\Release\2.0 folder. Make sure it is from the 2.0 folder (The version number may change depending upon the files you have downloaded).
6. Paste this DLL file into the bin folder of your FCKEDITOR website.
7. Now we have to add a reference of this DLL file into FCKEDITOR website.
8. Right click on your website in the VWD solution explorer or Visual Studio solution explorer and select Add Reference.
9. Choose the Browse Tab on the Add reference dialog box. Search for the FFredCK.FCKeditorV2.dll file from the bin folder and click ok.
10. Now we can add the FCKEDITOR control into the tool box.
11. Right click the standard tab on the toolbox and select choose items. Now select the .NET components tab and browse for the same FFredCK.FCKeditorV2.dll from the bin folder. Select it and click Open. Check the FCKEditor Component and click ok. This will add the FCKeditor control in your toolbox. You can see at the bottom of the standard toolbox.
Remember this DLL file is FCKEDITOR.NET component.
12. Create a folder called fckeditor in your website. Copy and paste all the fckeditor code files from the downloaded files into this folder.
To use fckeditor:
13. Add the following lines of code in your web.config file
<!-- FCK Editor-->
The base path refers the address of the fckeditor codes and the UserFiles path refers the path of the folder where the images and files will be uploaded.
14. Create the folder userfiles in the root directory of the website and give permissions for read and write.
Now to set the FckEditor to work with ASPX and give permissions to upload files.
15. Open the file fckconfig.js availabe in the fckeditor folder.
Search for the following lines var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
Make sure that the _FileBrowserLanguage and _QuickUploadLanguage are set to aspx within inverted comma.
Open the file config.ascx available in the fckeditor>editor>filemanager>connectors>aspx folder
search for the following line
// URL path to user files. UserFilesPath = "~/userfiles/";
make sure that the UserFilesPath is set to “~/userfiles/” or the name of the folder which is set in web.config file. Both should be same.
Now you have to set the Quick File Upload Path, otherwise your quickfile upload will not work
Modify the following lines as shown below (you are just adding the correct folder name for the quick file upload paths for image, media, flash and other files.
TypeConfig[ "File" ].DeniedExtensions = new string[] { };
TypeConfig[ "File" ].FilesPath = "%UserFilesPath%file/";
TypeConfig[ "File" ].FilesAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%file/" );
TypeConfig[ "File" ].QuickUploadPath = "%UserFilesPath%file/";
TypeConfig[ "File" ].QuickUploadAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%file/" );
TypeConfig[ "Image" ].AllowedExtensions = new string[] { "bmp", "gif", "jpeg", "jpg", "png" };
TypeConfig[ "Image" ].DeniedExtensions = new string[] { };
TypeConfig[ "Image" ].FilesPath = "%UserFilesPath%image/";
TypeConfig[ "Image" ].FilesAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%image/" );
TypeConfig[ "Image" ].QuickUploadPath = "%UserFilesPath%image/";
TypeConfig[ "Image" ].QuickUploadAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%image/" );
TypeConfig[ "Flash" ].AllowedExtensions = new string[] { "swf", "flv" };
TypeConfig[ "Flash" ].DeniedExtensions = new string[] { };
TypeConfig[ "Flash" ].FilesPath = "%UserFilesPath%flash/";
TypeConfig[ "Flash" ].FilesAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%flash/" );
TypeConfig[ "Flash" ].QuickUploadPath = "%UserFilesPath%flash/";
TypeConfig[ "Flash" ].QuickUploadAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%flash/" );
TypeConfig[ "Media" ].AllowedExtensions = new string[] { "aiff", "asf", "avi", "bmp", "fla", "flv", "gif", "jpeg", "jpg", "mid", "mov", "mp3", "mp4", "mpc", "mpeg", "mpg", "png", "qt", "ram", "rm", "rmi", "rmvb", "swf", "tif", "tiff", "wav", "wma", "wmv" };
TypeConfig[ "Media" ].DeniedExtensions = new string[] { };
TypeConfig[ "Media" ].FilesPath = "%UserFilesPath%media/";
TypeConfig[ "Media" ].FilesAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%media/" );
TypeConfig[ "Media" ].QuickUploadPath = "%UserFilesPath%media/";
TypeConfig[ "Media" ].QuickUploadAbsolutePath = ( UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%media/" );
In the same file check the following function
private bool CheckAuthentication()
{
return false;
}
changing return false; into return true; will give permission to all the users to upload files.
So you can include an if statement verifying the authentication like
if (Convert.ToBoolean(Session["validuser"]))
{
return true;
}
else
{
return false;
}
Session[“validuser”] should be true for the fckeditor to work.
It is all done.
Now drag and drop the Fckeditor into your aspx page and use it.
*Adding Fckeditor control in the toolbox will add assembly reference to the page in the top of the page when you drag and drop it.