After seeing a rather interesting demo of Ephox’s EditLive editor I decided to try it out for a bit. Having a natural .NET skepticism to all things java, I was pleasantly surprised at how easy it actually was to work with from a .NET environment. It comes with a nice ASP.NET control wrapper, that you can drag on to your web forms and user controls.

So, let’s get down to business – what do you get in a commercial java wysiwyg editor that you don’t get with the built-in editor and/or open source editors like TinyMCE / FCKEditor that I’ve often seen used with EPiServer CMS.

• Running as a Java applet means that it’s a bit heavier to load – but it feels like a “real” application. Also completely(!) cross-browser and cross OS. Also, by clicking a button you “pull” it out of the webpage and can use it as a regular app – in it’s own window.
• Many Word-like features. Including the ability to import word documents.
• Running as a trusted applet, lets it’ store things on disk. So you can easily load and save files on your local harddisk – or print it on your local printer.
• A significantly better table-editor than the one in the built-in. Easy to drag and resize tables, merge cells, etc.
• Image editor and Form editor built directly into the wysiwyg editor – no pop-up dialogs / windows for that.
• All menu items are completely customizable and others can be added
• Track-Changes – great for editor collaboration
• Various accessibility tools, that can validate your page built-in to the editor.
• Working with images is fast and easy cause they are on your own hard-drive until you save or publish in EPiServer.
• Great thesaurus and spell-checker.

Try it out yourself in an online demo.

Naturally I decided to try it out in a new Custom Property and see how far I could get with an implementation in a few hours – just to put the API to its test.

Prototype of EditLive Custom Property

First I downloaded EditLive. It comes with redistributables and .NET sample code. I then started out creating a custom property based on the XhtmlProperty. In the Control part I made a new CreateEditControls() method that returned Ephox’s ASP.NET wrapper control. In order for it to work I copied the redistributable folder for EditLive into my project. I also created 2 aspx files to support the the property. One that the editor can load to get customized configuration files and one the editor can post images to, in order to upload them. However, here I started to run into trouble. The java editor will try to access cookies through javascript to pass on in the calls, but ASP.NET and EPiServer in general uses HttpOnly cookies, not accessible through JavaScript. The solution is to manually set the cookies in the call. Here’s how the java control is initialized:

ej = new EditLiveJava(this.ID + "LiveEdit");

ej.DownloadDirectory = UriSupport.AbsoluteUrlBySettings("~/redistributables/editlivejava");

ej.ConfigurationFile = UriSupport.AbsoluteUrlBySettings("~/Ephox/Config.aspx?PageID="+CurrentPage.PageLink.ToString()+"&PropertyName="+EditLive.Name);

//TODO: Setup CSS file...ej.InlineEditingCSS

StringBuilder cookies = new StringBuilder();

foreach (string k in Page.Request.Cookies.AllKeys)

{

    var c = Page.Request.Cookies[k];

    cookies.Append(c.Name + "=" + c.Value + ";");

}

ej.Cookie =  cookies.ToString().TrimEnd(';') ;

A few other code changes, and pretty quick I had this:

It works pretty well. There’s still a lot to do, though:

• Make it work with the editor CSS settings in EPiSErver
• Make it follow all the rules for that property. I was lazy and only did one for enabling/disabling Bold.
• Insert link to Document in EPiServer – EditLive supports WebDav and so does EPiServer, so it might just be a configuration question
• Insert link to other pages in EPiServer – it’s fairly easy to launch a popup from a custom menu item, so maybe the existing link dialog can be reused.
• Insert dynamic content.