Digicorp

Table of Contents

• Introduction
• What is FCKEditor?
• When Should We Use FCKEditor?
• The features that attracts the user to use it
• What are improvement needs in it?
• Integrate FCKEditor    Step by Step
• How to apply Themes
• How to apply Language
• Conclusion
• Bibliography
• References
• History

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 Open Source category. In this article, I will explain some of good features.

What is FCKEditor?

FCKEditor   is HTML text editor brings to the web much of the power of desktop editors like MS Word. FCKEditor is 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.

The features that attracts 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

The improvement which could be done

1. Inbuilt facility to select theme at client side
2. Inbuilt facility to select language at client side
3. More font type and font size to improve user interface

Integrate FCKEditor Step by Step

1. Download FCKEditor  source code from 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 
3. Copy FCKEditor source code folder and paste it to website root directory. 
4. Copy FCKEditor  FredCK.FCKEditor V2.dll file from source code and paste it to website Bin folder 
5. You have to register FCKEditor to use it in your page. There are two way to register it. Manual: Following script will register it.  You have add this script in every page you want to use FCKEditor. From Toolbar: : You can Otherwise, you can browse FCKEditor by right click on Toolbar >> Choose Items. A dialog box will appear as shown in 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 manual method. 
6. Run website, you can see the FCKEditor in your browser with default theme and default English language. 

How to apply Theme?

FCKEditor   having a great themeing 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 downloading. There are many third party open source themes available to download. I have shared few themes with this article.

[1]. Default Theme

[2]. Office2003 Theme

[3]. Silver Theme

Now, how can assign default theme and apply dynamic theme?

Answer is here:

First of all you can set default theme from fckconfig.js, look at below image:

You can also set the language from .aspx /html /php page where you have declare FCKEditor  .

Just set the SkinPath Property.

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

How to apply Language?

FCKEditor   provides a great multiple language support feature. User can able to change the language dynamically or set default language as per website language.

FCKEditor provides 56 languages that is you can use as per your requirement.

Now, how can assign default language or apply dynamic language?

Answer is here:

First of all you can set default language from fckconfig.js, look at below image:

You can also set the language from .aspx /.html /.php page where you have declare FCKEditor.

Just set the DefaultLanguage Property.

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

Conclusion

FCKEditor   is very simple, easy to integrate and can be used in almost all the web application as html editor/ rich textbox editor.

Bibliography

FCKEditor

References

FCKEditor

History

4^th September, 2009: initial post

This entry was posted on Friday, September 11th, 2009 at 2:46 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.