Project Description
An ASP.NET wrapper control that allows the new Version 3 of the CkEditor, a fantastic open source HTML Editor. Full ASP.NET support is included, such as themes, skining, view state and more. Add Rich HTML Editing to your ASP.NET site with ease.


A screen shot of the Syrinx ASP.NET CKEditor wrapper control at work. The two drop down list controls above the editor are standard asp.net controls that will auto postback on select, which change the configuration of the editor.

Using the Syrinx CKEditor V3 ASP.NET Wrapper

CKEditor version 3 (previous called FCK Editor, but had its name change due to political posturing) was release in Aug 2009, and they have yet to release an ASP.NET control to make it easier to use in an ASP.NET environment. We wanted to upgrade the Syrinx Community Server's (SCS) usage of the editor to the latest, so we wrote our own and made it open source so anyone can use it.

The CKEditor product is a great jump up in functionality over the previous version. They have revamped everything and its more consistent in how plug-ins work. I noticed it was much faster to load in our products than the prior version, and we were able to port our SCS specific plug-ins over in just a few hours, even though there is a lack of documentation on what to do. In order to understand the process, I wrote some notes on how things work in the new plug-in environment and have made a user guide from that.

One really nice improvement in how the new editor works is that configuration is passed in on the creation of the editor in the browser. Overall, the new editor is much more flexible with the way it is configured and offers a nice cascading option that allows for configuration to be provided inline with the editor, as a separate js file, or built into the core products js. We made it easy to use these various ways of configuration within the ASP.NET control.

Getting the Control To Work

1. We do not distribute the CKEditor base javascript, so you'll need to download that as well. Our demo ASP.NET that is a part of our distribution does include a version of CKEditor, but the ASP.NET library itself does not, and you should download the latest from http://ckeditor.com. The ASP.NET code will automatically add the JS include on the page it is in, but it does expect the code to be in a directory called ckeditor by default. You can change that by setting the static CkEditorJS property on the ASP.NET control, which also will allow you to change the name of the ckeditor.js file if you've customized it in some way. It is recommended that you put the CKEditor javascript distribution in the standard directory of ckeditor and not change the CkEditorJS property.

2. Add the reference to the SyrinxCkEditor.dll to your ASP.NET site.

3. Add a reference to the control assembly to your ASP.NET page.
<%@ Register Assembly="SyrinxCkEditor" Namespace="Syrinx.Gui.AspNet" TagPrefix="syx" %>

3. Use the control. The simplest server side definition of the control is:
<syx:CkEditor runat="server" id="ed1" />

About the ASP.NET Control

The ASP.NET control is completely compatible with the ASP.NET theme structure, and is skinable. All of the major properties of the control are setup to be configured in ASP.NET skin files, which makes it much easier to do things like have different skins for editors that need different levels of toolbar support. In previous version of FCKEditor the standard was to define custom toolbars in the config file within the distribution. This made it more difficult to upgrade the editor to a newer version. Now, toolbar configurations can be defined in a theme skin, or in an external JS file.

ASP.NET ViewState is support for all properties except the Text property. This allows the controls configuration to be changed in event handlers and be remembered properly as standard ASP.NET events take place. Because very large documents can be edited in the control, it was decided to not use ViewState for the Text property to avoid the ViewState becoming too large. However, the ASP.NET control does implement the ASP.NET IPostBackDataHandler interface and uses that to get the value of the editor from the form post data and place it back in the Text property. The only loss from not using ViewState for the Text property is that the control cannot tell that the editor contents have changed during a postback and thus it does not raise a text changed event.

Our CkEditor control also inherits from ITextControl, make it plug and play with the standard ASP.NET text controls like the TextBox. This made integration into our SCS product easier, as we already had good support for the ITextControl interface.

One goal we had with the ASP.NET control is to make it really easy to inherit from the class to provide specific server side behavior beyond what comes with the base class provided here. The process of building up the configuration options and the html for the browser are all marked virtual, and were designed with inheritance in mind. In our SCS product, we have another class that inherits from this to integrate within our environment better, such as automatically switching the language used by the editor based on the user's selected culture. We also use it to resolve macros embedded in configuration options based on SCS's macro environment.

Because we are using this ASP.NET control in our production systems, we know it is solid and works well. There do seem to be some minor bugs in the way the new CKEditor works, but overall we are very happy with the move and highly recommend that if you are using an older version of FCKEditor, to make the jump up. We hope this ASP.NET control will make the job easier for you.

Get In depth Info on this control and How to Build a CKEditor Plug-in

I have written up some detail documentation on how to inherit from this control at http://syrinx.ph/articles/SyrinxCkEditorDev.aspx
I have written up a document on how to build custom plug-ins for the CKEditor that you can find at http://www.kusog.org/articles/WritingCustomCKEditorPlugins

Last edited Oct 7, 2011 at 4:26 AM by MattFromGA, version 7