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 2

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

Integrating FCKeditor in ASP.Net Websites – Part 2

 

In Part 1, we have seen how to integrate and doing some basic customization on FCKeditor when used in ASP.Net websites. Moving forward, Part 2 of this article series will discuss more on customization and client side interactions when using FCKeditor in asp.net.

 

Please read Part 1 of this article for basics and to integrate FCKeditor in ASP.Net websites.

 

 

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

 

Creating our own ToolBarSet

As we know, FCKeditor will have 2 default tool set, Default and Basic. Read Part 1 for more info. Not every time, we can live with these 2 default tool set. We will always have different requirements in different project that requires creating custom tool bar set for our Rich Text editor. FCKeditor has the flexibility to define our own toolbar set.

 

To create a new toolbar set,

Go to your fckeditor folder in solution and open fckconfig.js file. This file will have all the default configuration settings required to load the FCKeditor.

You can find the default toolbar set’s configuration settings here. Refer the below code,

 

FCKConfig.ToolbarSets["Default"] = [ Options ] ;

 

FCKConfig.ToolbarSets["Basic"] = [ Options ] ;

 

We can create a new toolbar set just below these settings by supplying whatever style options we may require. To create toolbar set with name “MyRTF”,

 

FCKConfig.ToolbarSets["MyRTF"] = [

       ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

] ;

 

Save the file. To apply this custom toolbar set to our editor, we need to set the ToolbarSet property of the control to “MyRTF”. So the code will look like,

 

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

</FCKeditorV2:FCKeditor>

 

Execute the page and you can see the custom toolbar set appearing with the editor.

 

The disadvantage of this approach is, when we need to upgrade the editor to a newer edition it will replace our custom configuration settings in the file and we should re-configure it again. It will be good if we can segregate these settings into a separate file.

 

To do this, create a new JavaScript file, say fcksettings.js, in a separate folder in the solution. Refer the below figure,

 

I have created under a folder named RTFSettings.

Now, move the custom toolbar set configuration we created in the fckconfig.js file to this new file.

 

To make the FCKeditor to take the config settings from our file, we need to configure a property called CustomConfigurationsPath in aspx or codebehind,

 

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" runat="server">

</FCKeditorV2:FCKeditor>

 

Here, Test is the project directory name. Execute the page and you can see the custom toolbar appearing with the editor.

 

Note

We can also set this property in fcksettings.js file. Search for CustomConfigurationsPath property in this file and set the file path.

FCKConfig.CustomConfigurationsPath = '/Test/RTFSettings/fcksettings.js';




Skins and Custom Skin for FCKeditor

A skin controls the appearance of the FCKeditor.

By default, the editor is packed with 3 different skins,

1.      Default

2.      Office 2003

3.      Silver

 

We can find all the style files required for the skins under the folder fckeditor/editor/skins/.

 

You can change a property called SkinPath either in aspx/codebehind or in fckconfig.js to configure a skin. By default, it will be configured with default skin. To make it as silver,

 

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/';

 

Execute the page and you can see the new skin applied to the editor.

 

At times, we may require customizing the look and feel of the FCKeditor control to match our project’s color codes and appearance. To do this, we need to create custom skin with our own customizations syles.

To create a new skin, we will require all the files you see for default skin folder. We can copy the default skin folder into our own folder and rename it. Refer the below figure.

We can now change all the styles in stylesheet files under the folder to fit our need. To set the custom skin, again we need to set the SkinPath property of FCKEditor either in fckconfig.js file or aspx/codebehind to point to our skin folder. Refer below code,

 

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" SkinPath="/Test/RTFSettings/MySkin/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" runat="server">

</FCKeditorV2:FCKeditor>

 

Customizing Editor Area

This is another area which needs to be changed to match our project’s styles. For example, the default font in the editor area may be different from our project’s font. For FCKeditor, we can see all the styles of editor area defined in folder fckeditor/editor/css/ fck_editorarea.css.  We can customize the styles in this file or an external style file and configure the EditorAreaCSS property either in fckconfig.js file or aspx/codebehind to pick our style file like we did in previous sections.

 

Client Side Interactions with FCKeditor

In this section, we will see how we can validate an FCKeditor for mandatory using validation control. We can do a mandatory check for FCKeditor using CustomValidator control in asp.net. Refer the below code,

 

Validation function

function RTFMandatoryValidate(source,args)

    {

    var RTF = FCKeditorAPI.GetInstance('rtfComments');

    if(RTF.EditorDocument.body.innerText.length==0)

    {

        args.IsValid = false;

        RTF.EditorDocument.body.focus();

        return;

    }

    args.IsValid = true;   

    return;

    }

 

Control in ASPX

 <FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" SkinPath ='/Test/RTFSettings/MySkin/' runat="server">

</FCKeditorV2:FCKeditor>

<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="RTFMandatoryValidate"

ErrorMessage="Pls Enter Some Comments"></asp:CustomValidator>

Reference

http://docs.fckeditor.net/

 

Conclusion

Thus, we have learnt how to integrate and do some basic customization with FCKeditor. This article will help for making some rudimentary customization that are required to make on the control while there are more customization that can be done on the control. Visit the link that is listed on the reference section to do more customizations.

Happy coding!!

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments
My <a href="http://j
My <a href="http://jrldpcmmnd.com">prlbeom</a> was a wall until I read this, then I smashed it.
No copalmints on thi
No copalmints on this end, simply a good piece. http://exgzyq.com [url=http://qcjvlodu.com]qcjvlodu[/url] [link=http://pzevpsctiy.com]pzevpsctiy[/link]
If I <a href="http:/
If I <a href="http://ktnslrvimo.com">cocienmmatud</a> I could thank you enough for this, I'd be lying.
If you want to get r
If you want to get read, this is how you shuold write.
Setting custom toolbarset of FCKeditor
GP Code Library
Setting custom toolbarset of FCKeditor
Fckeditor is best lightweight ready-to-use open source WYSIWYG text editor for any web application. We can enter any type of paragraphs, images, html elements etc into. It is fully free and customizable web content editor. Here we will know that how can we create our own custom toolbar for fckeditor for our website.
http://codelibrary.googleplus.co.in/setting-custom-toolbarset-of-fckeditor/
Re:FckEditor for .Net
@Rishi Ghai: I followed all steps you mentioned and that was very helpful, but I had to create another folder inside userfiles folder called "image" without it the error was still exist, but that may be because I created the "userfiles" folder at the root of my application (not inside "fckeditor" folder)

thank you
seo company sri lanka
Excellent Article, Pretty Useful, Thanks

seo company sri lanka
http://www.seolanka.com
seo company sri lanka
Very Useful Article, Thanks Buddy.


SEO COMPANY SRI LANKA
http://www.seolanka.com
website design sri lanka

Excellent Article.............................
Was Really Helpful, Thanks

Website Design Company Sri Lanka
http://www.webdesigncompany.lk
http://www.springtec.net
http://www.ewebdesignsrilanka.com
Thanks a lot
Thanks man, you made my day!
Website design company sri lanka
thx, this is a good article

http://www.springtec.net
thank you soooooo much
ur really made my day.
i really appreciate ur help.
again thannnkkkkkkkk you
FckEditor for .Net
I am able to fix the issue related to XML response for the Asp.Net integration. I executed the following steps in order to resolve the issue
1) Change the following lines under fckconfig.js page
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
to
var _FileBrowserLanguage = 'aspx' ;
var _QuickUploadLanguage = 'aspx ;

2) Open fckeditor/editor/filemanager/connectors/aspx/config.ascx- chnage return false; to return true; under CheckAuthentication() function

3) Create a userfiles folder under fckeditor folder and change UserFilesPath = "/userfiles/"; to UserFilesPath = "userfiles/"; under SetConfig function.

I hope this helps...
Bravo
Bravo
installing FCKeditor
hi Satheesh,
I have already integrated FCKeditor in my ASP.NEt pages. Everything seems OK but if i want to insert an image inside the document I get error message.
Steps:
1. open announcement in wysiwyg editor
2. click the insert image button
3. click the browse server button
4....then i get error message in new window: the server didn't send back a proper XML response.Please contact your system administrator......XML request error: OK (200)

I tried to get some informations in the net community but still not successful

any recommendations ?
thank you
Jan