Click here to Skip to main content
12,882,639 members (32,108 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

55.7K views
2.3K downloads
29 bookmarked
Posted 15 Feb 2011

Efficient Usage Of FckEditor

, 15 Feb 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
There are many editors available in the market. Each editor has its own features, benefits and drawbacks. FckEditor is top one of them in Open Source category.

Introduction

There are many editors available in the market. Each editor has its own features, benefits and drawbacks. FCKEditor is top one of them in the Open Source category. In this article, I will explain some of the good features.

What is FCKEditor?

FCKeditor is an HTML text editor that brings to the web much of the power of desktop editors like Microsoft Word. Fckeditor is a powerful tool which provides the HTML editing, theme to suit your web interface, multiple language supports, selection of tools to be displayed as per requirement, image upload, flash file upload and many more. It's lightweight and doesn't require any kind of installation on the client computer.

Features that Attract the User to Use It

  1. Open source
  2. User friendly and easy to integrate
  3. Toolbar selection facility
  4. Support of multiple language
  5. Support of skin to suite web page UI
  6. Light weight
  7. Image and flash file upload

Improvement Which Could Be Done

  • Inbuilt facility to select theme at client side
  • Inbuilt facility to select language at client side
  • More font type and font size to improve user interface

Integrate FCKEditor Step by Step

1. Download Fckeditor source code from the following link:

http://sourceforge.net/projects/fckeditor/files/FCKeditor/2.6.4.1/FCKeditor_2.6.4.1.zip/download

2. Create new/ Open existing web project/ website:

1.CreateWbsite.png

3. Copy Fckeditor source code folder and paste it to website root directory:

2.Pastfckeditor.png

4. Copy Fckeditor FredCK.FCKeditorV2.dll file from source code and paste it to website Bin folder:

3.DllPaste.png

5. You have to register FCKEditor to use it in your page. There are two ways to register it.

a) Manual: The following script will register it. You have add this script in every page where you want to use FCKEditor.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 

	Inherits="FCKEditorDemo._Default" %>

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

	Assembly="FredCK.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>FCKEditor Demo : Amit Shah</title>
</head>
<body>
    <form id="form1" runat="server">
      <div align="center" width="70%">
          <hr />
          <h1>
              FCKEditor Demo : By Amit Shah</h1>
          <hr />
      </div>    
      <div>
           <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" 

		BasePath="~/fckeditor/" Height="300px"

               Width="70%">
           </FCKeditorV2:FCKeditor>
      </div>
     </div>
    </form>
</body>
</html>

b) From Toolbar: You can otherwise, you can browse FCKEditor by right clicking on Toolbar >> Choose Items. A dialog box will appear as shown in the following image. Select .NET Framework Components >> Click on Browse button located at right hand bottom. Choose the .dll of FCKEditor from the bin directory of your application. An item called FCKEditor will be added to your Toolbar. Now you are ready to drag and drop editor in your page. If you place editor in your page, it will also add same code in your web page as we have done in the manual method.

5.InsertIntoToolBox.PNG

6. Run website, you can see the FCKEditor in your browser with default theme and default English language.

4.RunFCKEditor.png

How to Apply Theme?

FCKEditor has a great theming feature. User can apply the theme in two ways. One way is dynamically and another statically. The site of FCKEditor provides 3 themes to be downloaded. There are many third party open source themes available to download. I have shared few themes with this article, which you can find in the demo project attached with this article.

Now, how can we assign default theme and apply dynamic theme?
The answer is here: First of all, you can set default theme from fckconfig.js placed in FCKEditor folder, look at the below code:

  FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Default/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/SilverNarrow/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2007/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/ChroomDeluxe/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Aluminum/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Obi-D_V1/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Office2003Blue/';

You can also set the language from .aspx /html /php page where you have declared Fckeditor.
Just set the SkinPath Property.

Now run the application. You can view the office2003 theme in Fckeditor as you have set in the above page.

2.applytheme.png

How to Apply Language?

Fckeditor provides a great multiple language support feature. User is able to change the language dynamically or set default language as per website language.
Fckeditor provides 56 languages that you can use as per your requirement.

Now, how can we assign default language or apply dynamic language?
The answer is here:
First of all, you can set default language from fckconfig.js, look at the below code:

FCKConfig.AutoDetectLanguage	= false ;
FCKConfig.DefaultLanguage	= 'en' ;
FCKConfig.ContentLangDirection	= 'ltr' ;

You can also set the language from .aspx /.html /.php page where you have declare Fckeditor.
Just set the DefaultLanguage Property.

2.Setlanguage.png

Now run the application. You can view the Arabic language in Fckeditor as you have set in the above page.

3.LanguagePreview.png

Conclusion

Fckeditor is very simple, easy to integrate and can be used in almost all the web applications as HTML editor/ rich textbox editor.

History

  • 15th February, 2011: Initial post

Bibliography

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amit Pankajkumar Shah
Software Developer (Senior)
Denmark Denmark
Amit Shah have 6 year experience in the computer industry working on Microsoft .NET tools & technologies(WCF, LINQ, WebForms, MVC, DNN, Entity Framewrok, Jquery,JSON), Microsoft SQL Server Reporting Service including analysis, design, development, project management and interaction with client on site.

Amit Shah also having knowledge of crystal reports and MS SQL Reporting Service 2008 (SSRS 2008).

You may also be interested in...

Pro

Comments and Discussions

 
QuestionUnable to get property 'focus' of undefined or null reference using FredCK.FCKeditorV2 dll at runtime with ie 10 Pin
Member 105532498-Dec-14 15:07
memberMember 105532498-Dec-14 15:07 
Questionhow to manage image uploading control into FCK editor Pin
Member 1053873520-Aug-14 2:54
memberMember 1053873520-Aug-14 2:54 
QuestionImage Upload Pin
Tarek Selem17-Dec-13 23:08
memberTarek Selem17-Dec-13 23:08 
QuestionNot Work in IE 6 to 10 Pin
rajusharde30-Jul-13 23:18
grouprajusharde30-Jul-13 23:18 
QuestionHow do I change the location of the images on the server? Pin
Pie At The Raven26-Sep-12 23:58
memberPie At The Raven26-Sep-12 23:58 
QuestionWhenever I click the link or image button I get an error Pin
Member 93205781-Sep-12 16:03
memberMember 93205781-Sep-12 16:03 
GeneralMy vote of 4 Pin
Kishanthakur11-Apr-12 1:22
memberKishanthakur11-Apr-12 1:22 
GeneralChange page header to allow HTML editing, prevent cross site scripting Pin
Peter Huber SG22-Feb-11 14:01
memberPeter Huber SG22-Feb-11 14:01 
GeneralRe: Change page header to allow HTML editing, prevent cross site scripting Pin
amitshah4all25-Feb-11 1:43
memberamitshah4all25-Feb-11 1:43 
GeneralRe: Change page header to allow HTML editing, prevent cross site scripting Pin
Peter Huber SG25-Feb-11 3:38
memberPeter Huber SG25-Feb-11 3:38 
GeneralRe: Change page header to allow HTML editing, prevent cross site scripting Pin
amitshah4all25-Feb-11 19:32
memberamitshah4all25-Feb-11 19:32 
GeneralRe: Change page header to allow HTML editing, prevent cross site scripting Pin
Peter Huber SG25-Feb-11 22:34
memberPeter Huber SG25-Feb-11 22:34 
GeneralFCK Editor is old version. Better use CK Editor [modified] Pin
Peter Huber SG22-Feb-11 13:40
memberPeter Huber SG22-Feb-11 13:40 
GeneralRe: FCK Editor is old version. Better use CK Editor Pin
kelvin z22-Feb-11 19:40
memberkelvin z22-Feb-11 19:40 
GeneralRe: FCK Editor is old version. Better use CK Editor Pin
Shama Shahzadi5-Jun-11 7:08
memberShama Shahzadi5-Jun-11 7:08 
QuestionIsn't it called CKEditor? Pin
veki-peki15-Feb-11 22:33
memberveki-peki15-Feb-11 22:33 
AnswerRe: Isn't it called CKEditor? Pin
Kelly Herald16-Feb-11 13:18
memberKelly Herald16-Feb-11 13:18 
GeneralMy vote of 5 Pin
Kalpesh H Patel15-Feb-11 21:47
memberKalpesh H Patel15-Feb-11 21:47 
GeneralMy vote of 4 Pin
HaBiX15-Feb-11 20:41
memberHaBiX15-Feb-11 20:41 
GeneralMy vote of 4 Pin
Sandeep Ramani15-Feb-11 17:39
memberSandeep Ramani15-Feb-11 17:39 
GeneralThoughts... Pin
SledgeHammer0115-Feb-11 9:30
memberSledgeHammer0115-Feb-11 9:30 
GeneralRe: Thoughts... Pin
HaBiX15-Feb-11 20:41
memberHaBiX15-Feb-11 20:41 
GeneralRe: Thoughts... Pin
SledgeHammer0116-Feb-11 7:12
memberSledgeHammer0116-Feb-11 7:12 
GeneralRe: Thoughts... Pin
Kelly Herald16-Feb-11 13:20
memberKelly Herald16-Feb-11 13:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170422.1 | Last Updated 15 Feb 2011
Article Copyright 2011 by Amit Pankajkumar Shah
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid