CODEDIGEST
Home » Articles
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Integrating FCKeditor in ASP.Net Websites – Part 1

By Satheesh Babu
Posted On Mar 02,2009
Article Rating:
Be first to rate
this article.
No of Comments: 27
Category: ASP.Net
Print this article.

Integrating FCKeditor in ASP.Net Websites – Part 1

 

We use TextArea field to capture large user inputs in websites. For example, receiving user comments for an item, submitting articles, etc. It will be good if we have HTML formatting in those scenarios and let the users to style their text, some sort of WYSIWYG editors/Rich Text Box. Developing a WYSIWYG editor ourselves is complex and time consuming task. There are so many free third party WYSIWYG editors available in the market which can be re-used in our websites. One such editor is FCKeditor that can be used in developing websites with Rich Text Formatting. Unfortunately, the documentation in official website is not clear and sufficient for a beginner to start with.

Moving forward, we will see more about FCKeditor and how to integrate and use it with ASP.Net applications. In Part 1, we will see more about integrating and using the FCKeditor in ASP.Net with some basic customization. Part 2, we will discuss about more customization and client side interaction when we use FCKeditor.

 

Integrate latest version of CKeditor

Using CKEditor 3.x[aka FCKeditor] in ASP.Net

Using CKEditor 3.x [a.k.a FCKeditor] with jQuery in ASP.Net

To upload image and emebed it from CKeditor, please refer,

Upload Images and Integrate with CKeditor in Asp.Net

 

 

Downloading FCKEditor

You can download the FCKeditor from its official website, http://www.fckeditor.net. The current available version is 2.6.4.

1.      Download the ASP.Net version of FCKeditor called FCKeditor.Net from the link http://www.fckeditor.net/download

2.      FCKeditor.Net package is just the asp.net control and you need to download the supporting source files from the above location. You can find this in the top 2 links in the same page. Download the zip file (FCKeditor 2.6.4). The below figure shows the files that needs to downloaded from the website.

 

 

Integrating and using in ASP.Net Page

1.      Create a new ASP.Net website in Visual Studio 2005.

2.      Unzip the ASP.Net FCKeditor zip file. You can add the FCKeditor in visual studio toolbox by Right click on the toolbox > Choose Item > Browse to the location where you have unzipped the control. You can find the dll file in location FCKeditor.Net_2.6.3\bin\Release for both 2.0 and 1.1 version of ASP.Net. I have selected the dll from 2.0 directory. You can see the control added to the toolbox.

 

You can now drag and drop the control in the aspx page.

Below you can find its aspx code generated. You will also find a Register directive on top of the page for the control.

 

<FCKeditorV2:FCKeditor ID="rtfComments" runat="server">

        </FCKeditorV2:FCKeditor>

 

Executing the page now will give you 404 page not found error. It is because; we have not added the FCKEditor source files into our project that we downloaded in Point (2) of the previous section (Downloading FCKEditor). Unzip the file and copy the fckeditor folder into the solution. Refer the below figure that shows the source files added to the solution.

 

We need to specify the root folder of this source files through the BasePath property of FCKEditor.

 

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" runat="server">

</FCKeditorV2:FCKeditor>

 




To access the text typed in the editor, we can use the server side property Value.

 

protected void btnSave_Click(object sender, EventArgs e)

    {

        Response.Write(rtfComments.Value);

    }

 

Execute the page and you can see the FCKeditor appearing the screen.

 

Customizing the FCKeditor

By default, when we execute the page we will get all the toolbars for the FCKeditor. Refer below figure,

 

Most of the times, we will not require all the style elements that is seen in the above figure that comes by default. The FCKeditor by default will come with 2 different toolset, Default and Basic. The above figure is default. Basic toolset will have very basic style elements like bold, italics, lists and links. To set the Basic toolset, set the property ToolbarSet to "Basic". You can see the output below.

 

In part 2, we will see more about creating our own toolsets and more about customizing the FCKeditor. We will also see about accessing the FCKeditor in client side and doing some basic validations on the control.

 

Making ToolbarSet Non Collapsible

By default, the toolbar set is collapsible and it can be controlled by the upward arrow button seen on the left hand side of the toolbar set. Setting ToolbarCanCollapse to "false" will make the toolbar to always appear and will remove the upward arrow.

 

Controlling Copying text from other sources

By default, when we copy text from other sources like word, html page it will retain the html styles in copied text in the toolbar area. To disable this behavior, we can use the Boolean property ForcePasteAsPlainText. Setting this to true will remove the source formatting and only copies the text.

 

Conclusion

FCKEditor is one of the very useful WYSIWYG editors that are available for web developers. Thus, In Part 1 we have seen how to integrate and doing some basic customization with FCKeditor. Stay tuned for Part 2.

Happy Coding!!!

 

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments
Well Done
Resolved in a minute after spending 2 days in finding solution
Excellent
It seems to be good.I integrate fck with my project and its work fine.. Good explanation too.. Thanks
home
thank u
preferable
This article helped me so much to integrate FCKeditor in my ASP.net application.
How to bind?
Anybody know How to bind a .txt file to .aspx file using FCKeditor
Thanks for help
Thanks Boss,

Part 1 is very helpful for new user of CKeditor.

Moving to part2.
Where are the scripts??
Anyone know where these required script files are located?

Looks like the fckeditor website is updated from what is shown here and there is no link specifically for script files, just mentions of needing to download them, too, but no links to download them!
RE:validation of fckeditor
Please read,
http://www.codedigest.com/Articles/ASPNET/217_Integrating_FCKeditor_in_ASPNet_Websites_%e2%80%93_Part_2.aspx
validation of fckeditor
how to validate fck editor in asp.net any one plz
Thanks
I mean it, it solved my problem.
Outsatanding
Thank you
Nice
Thank you very much for this article. I've been looking for somthing like this! Do you know if it works with VS 2008?
thank u
sincere thanks mate
thank you and i mean it
this was very helpful for me.
thank you for your free help.
Thanks
Thank you very much.

This is the only example i found very clear in installing the FCK.

Even the FCK site does not mentions the inclusion of fck folder.
WOW...been searching for three days to get an article like this one..
I really liked this and solved my purpose..amazing one dude...


Thanks a lot ....i mean it...and to b frank...thanks a ton...
not working in vs 2005
friends
doing all things and then compiling ,it is generating compilation error as <b>"Could not load 'FredCK.FCKeditorV2.FileBrowser.Config"</b>

Is it because I've downloaded dll for the latest version of VS ,I'm using VS 2005 currently .....Please help
simply super
simply super
helli
well done mate...nice article
WoW
Hey, thanks for such a nice post. Thanks a lot.
Great Help
I became despearte that I could not understand the 404 Error.
Good article that helped a lot. Thanks.
Good One
This is the only clear FCKEditor integration steps.

Thank you.
Editor not working
thanks Guys!! it Works
RE:Integration Question
Hi dranreb,
Could you please provide enough information on what you are trying to do and whats your query?
Integration Question
I am trying to update the html in a masterpage content control. When I followed the instructions t he editor works but it updates the top of the master page instead of the section where the editor is located.
RE:integration successfull
Thanks for the feedback Ajay!
integration successfull
Hi,Satheesh


With your instructions i had done the integration, and its working now. Thanks satheesh , i was messing up with it from the last 3 days, now its done.

Thanks again.