Introduction

One of the things you will notice in ASP.NET today is that, by default, out of the box, there is no standard control representing a rich text editor. You will also notice that your only viable options are quite limited to:

FREETEXTBOX --while the name suggests it's free, what is free is only a subset of features, while the full version is on a pay basis.

FCKEditor --This is the most highly used editor in the market today due to it being Open Source; however, mainly it's just a client-side product with several contributors having written server-side wrappers around the client-side library. The problem with this though is that the web control is simply a wrapper.

You purchase a commercial license from third parties (quite pricey).

Jiffycms HTML Editor is a rich text Open Source HTML editor with commercial grade features, and is a great alternative to all three points above. It's written for ASP.NET, and uses ASP.NET AJAX Extensions to the full potential. It is also a rich server-side Web control requiring you to make very little effort to get it running as it uses the VS.NET designer at full potential too. There are just too many features, and to list each here is not going to be possible; instead, this article will focus on first time usage, and specifically how to move the CSS generated by the WebControl to an external CSS file.

Unlike most HTML editors, Jiffycms HTML Editor is a true Web Control without any extra dependencies, and is packaged as a single DLL. Since it is built on top of the AJAX Extensions library, which many people are already referencing in their pages due to their using the UpdatePanel or what not, the payload in the client library download size is minimized: something which you will incur on other third party editors out there today since they tend to use their own custom libraries.

Here in this post, I want to showcase how easy it is to use the Jiffycms HTML Editor in your pages and how to perform some optimizations to get the best performance from your web apps by using an external CSS stylesheet file.

Usage

First, let's try to start from the basics and define a new WebSite Project for the purposes of this tutorial:

Let's now download the Jiffycms HTML Editor DLL from CodePlex. Now that we have the DLL, which is Jiffycms.Net.Toolkit.dll, we are ready to add it to our Toolbox in VS.NET. Before you add it to your Toolbox, to help you in better organizing all your custom controls, you may want to create a new tab in the toolbox first and then add the control in there.

Now, right click into your newly created tab empty area, and select "Choose Items" from the context menu. You can also simply drag and drop the DLL into the empty area.

When you are done browsing to the DLL you downloaded from CodePlex, you should see it in your toolbox at this point, and you are ready to start using this fine component.

While you may not like working in Design view in VS.NET, dragging and dropping the control from the Toolbox onto your web form is going to allow the editor to make the initial configs in your web.config file automatically. The registrations it makes can be made manually, it's just a registration for a simple HttpHandler in web.config.

If you prefer to do this manually, then make the following entry under the path Configuration/httpHandlers section; for IIS 6, this is as follows:

Note: If you are dragging and dropping the component from the Toolbox, this is already done for you.

After dragging and dropping the control at Design time, this is what the HTML editor looks like in Design view:

Oh great, we got design-time rendering of the editor. Now, it's a matter of playing with the various properties in the property grid. Upon running the page, you will notice lots of CSS output in the head section of your rendered page. While this is the default, you can chose to put the CSS in an external CSS file. Doing this will not only decrease the page payload, but since the CSS is in an external CSS file, it will get cached by the browser, so that subsequent requests will be served from the cache automatically.

Fortunately, this kind of change is not hard to do. You can use a design-time feature to collect all the runtime CSS generated by the control and manually copy it into an external CSS file.

Just copy the CSS and paste it into an external style sheet, then reference the CSS file via the ExternalStyleSheet property:

Note that every time you make a modification to the editor such as modify the styles in the designer or modify style dependent properties such as IconsMode, ToolbarMode etc., you will need to regenerate the CSS and update your CSS file manually. Fortunately, if you have decided to go this route, you might also be editing the CSS yourself so this may not be an inconvenience after all.

History

Update: 22 - March - 2009

A new article is now available dealing with the Image Gallery in Jiffycms HTML Editor.

Apologies for late reply. This type of problems need to be reported on the forum[^] because it's more convenient for me and others to have a central place to search for common problems and solutions and discuss. Most of all, it's easier for me

That said, try with the latest version, this is practically a rewrite and has many enhancements and fixes.

hi, late response, I apologize for this. I hardly check up on codeproject due to lack of time, but in case others are asking themselves the same question allow me to make you a belated response. You are correct. IE6 was not a supported browser in the initial version. I was really hoping for IE6 to fade away after the release of ie8 but it still has a strong market. I have re-evaluated my situation since and now IE6 is also treated as a first class browser and the same features you see in IE8 are also supported in ie6.

You need the latest release. You may get it from codeplex. I update codeplex frequently so keep checking always for latest releases there or report on the [Forum] if you continue to have issue.

Did a quick look at the editor. One of the things I like from fckeditor and can't find with jiffycms is the rightmouseclick on a image and/or hyperlink, where in fckeditor popup's options for properties and change for current object.

On the website at http://www.jiffycms.net/Forum/ShowPost/6/JiffyCms-Support.aspx a user asks:

"Also, I am confused about the purchase page. Would I need to purchase one of the licenses to use the Html Editor in a corporate environment?"

And the reply is:

"The HTML Editor is free ofcourse, since it's licensed under the GPL. However, if you purchase one of the licenses, then those licenses apply to the HTML Editor too."

I thought the GPL license meant that if this editor is linked into a project, that the project needs to be GPL also? I to just want to make sure that it'd be ok to use this nice editor in one of my commercial, non-GPL projects.

Yes, that writeup confirms my impression. I would be most interested in hearing what alessandro says about it, because his reply to the question about using it for corporate software indicates that the software if free to be used for such purposes, whereas of course a high percentage of software that's used in corporations is not gpl oriented. That contradiction is why I posted here. I'm not sure if Alessandro is clear on the implications of GPL2 or not, but I'm sure if he stated what his intent is, it'd help me determine whether this software is worth evaluating or not. I can't use it if it's GPL and that's probably true of many others here, so I'd hope for a license change, or at least a clarification from Alessandro of what his intent is.

hello, apologies for late reply. The question you are referring to was with regard to Jiffycms which is a separate product. Jiffycms is a content management system I have written as a commercial product that uses "Jiffycms *HTML Editor*". Perhaps I should find a name for the Editor since it's starting to get confusing now.

Though, I have to say, that at the moment I have delayed Jiffycms (The content management system).

When i mentioned the line you read below :

"The HTML Editor is free ofcourse, since it's licensed under the GPL. However, if you purchase one of the licenses, then those licenses apply to the HTML Editor too."

I was referring to the more relaxed licensing that was possible in case that individual purchased the content management system (a commercial product).

This is not to say that the GPL2 is not relaxed. It's just sometimes, due to company policies or not wanting to abide by the GPL2 some seek more liberty (for lack of a better term) or perhaps compatibility with their licensing models which also seems to be your case.

At the moment I am not providing an alternative route to the GP2L, but I shall try to include other licenses in the future since I do not expect the GPL2 to meet everybody's requirements.

Thanks for the reply Alessandro. In my case and probably for many others, I can't even begin to consider this HTML editor for any of my projects, which are typically small scale custom apps created for various organizations. Just about all of my applications involve some specialized business processes which my clients will not consider making public. It would be most helpful if you make this control available using one of the permissive licenses like MIT so that it could be used at will. I am not sure that I'd want to pay a license fee for this editor, there are a a good many well supported commercial options out there already. But I am only guessing. I've not tested out your editor, since the license precludes my use of it at this time, so I don't know how it might fit.

hi wallace, sorry for delayed response. Request validation in asp.net is quite a general purpose functionality that blocks everything without discrimination. In case where you want to expose an HTML editor, you expect HTML input so you'll need to enable on those specific pages and handle the request manually by HtmlEncoding and what not.

I have tried everything on the Web control side to handle this as gracefully as possible without forcing the developer to enable request validation, and one initial approach I had taken was to encode the contents in js itself and then submit but this opened up other issues such as the end user disabling js or using a browser in downlevel mode and then end up with asp.net throwing a fit on the server when the request came in.

Also in downlevel mode this approach failed. The best approach as per my research was to let the developer handle this manually by doing the needful to prevent XSS attacks. There is a nice library provided by MS as a sandbox project, you can find here : http://www.asp.net/Downloads/sandbox/[^]

This last time I found 40 identical entries which I didn't put there. Any idea as to what is happening?

FYI: I also tried registering at your site so I could leave a post on your forum and received a password error each time even though the password met the length and character requirements. In using the contact us form, I received a message that I had to enter a message when I had already entered a message od about 250 characters.

hi Gfw, sorry for the delayed response. Your suggestions are good improvements and they address some of the short comings of the control. I will try to add them soon. As for the value of the textbox not clearing in your situation, I confirm that this is a bug, I shall fix it soon too.

As for the extra entires regarding the handler being registered multiple times in web.config, this is a designtime feature I added to make the entry if it does not exist in web.config. I have not been able to reproduce but I'll test some more and fix it more elegantly (perhaps by providing a dialog asking for confirmation before making the change in web.config)

My apologies for your not being able to register on the site. This was a long due bug, I have recently fixed.

I try to test the control in a new web site project (VS2008).
I added a reference to the dll i downloaded.
Wrote the code below.
Run the project.
The IE with the html editor appears.
wrote couple of lines in the editor and hit the view HTML tab. Nothig happes.
What is missing or what i'm doing wrong ??