Genii Weblog

Show and Tell Thursday - Integrating web editor with Domino (without CoexEdit)

Thu 23 Feb 2006, 10:05 AM



by Ben Langhinrichs
Show and Tell Thursday logoAs part of my presentation at the EntwicklerCamp 2006, I created a database that demonstrates how to integrate FCKeditor, a very powerful open source WYSIWYG web editor, with Domino, including the ability to import local images, attach files, and even create doclinks, all without the need for CoexEdit.  All for free (as in beer, which usually isn't).  Of course, because it doesn't use CoexEdit, this is a web only solution and has a few other implications I will get into, but it is still a fairly awesome and easy to use integration.  I decided it would be good to share it with you all as part of Show and Tell Thursday, especially because I think it shows some of the power of integrating what Domino does well with what external software products, including open source products.

To start with, you will need FCKeditor.  You could get the version from the official website, but then you would lose special features such as the importing of images from the local hard drive, the attaching of files and the creation of doclinks.  Those are all my additions.  So, instead, why don't you get it here at the EntwicklerCamp 2006 - Web Editor Session page, along with the database.

Now, feel free to read the slides, but the gist of what you need to see is the the WebSubform subform, and the HTMLBodyContent computed field.  If you look in the Example Form in the HTML Head Content formula, it includes both the HTMLBodyContent from the subform and the actionbar.css (which was created by Tim Davis of the Turtle Partnership Ltd. and modified by Rocky Oliver).  There is a computed subform which is where the Body field would normally be placed, and this uses either the WebSubform or NotesSubform, depending (if you can't guess what it depends on, perhaps you are on the wrong website).

Another crucial element is the WebQuerySave agent, which sets the passthrough HTML flag on the HTML generated by FCKeditor.  This is critical to the display of the rich content when you are just reading the document.

Now for the customizations.  

Local images
We use a technique which looks great but does have a few issues.  Basically, there is a separate form for the image called $CoexEditTempImage (note that CoexEdit isn't required, but it was the basis for these customizations.  There are advantages to keeping these names the same for now).  When you are in FCKeditor and go to the image button, there is an option which says Browse Local.  When clicked, this essentially creates a temporary document with an upload control, lets you upload the images, then points to that image in the temporary document.  This is the source of one issue.  With CoexEdit, this temporary document is done away with when you save the original rich text field, and the image is brought in locally.  Without CoexEdit, this will remain a temporary document and will not get automatically removed if the image is removed from FCKeditor or even if the document with the rich text is never really saved.  Thus, you may want to add some sort of a cleanup.

File attachments
We use a technique very similar to that used for images, and it has the same basic problem.  Still, it allows you to create file attachments where and when you like, much like in the Notes client.  No file upload controls need be added to the Example Form, and you can add as many files as you like without having to submit and reload every time.  With CoexEdit, this temporary document is done away with when you save the original rich text field, and the attachment is actually made to the original document, but not in this version without CoexEdit.  Again, you may want to add some sort of a cleanup.

Doclinks
This technique is actually very easy, but it looks amazing.  There is a special (ExamplesForPicking) view, which is then shown as an embedded view in the DoclinkSelection form.  There is a column in this form that simply adds back the UNID to the calling routine, which places a doclink image and appropriate URL link.  I have added a doclink sumbol to the toolbar in FCKeditor, so you just add doclinks where and when you like.  In addition, you can highlight some text and create a link hotspot by simply clicking on the Link toolbar icon and then switching from URL to "Notes doclink".  This will bring up the same interface for the doclink selection, but will simply become an appropriate link hotspot.

Phew!  There you have it.  A very powerful web editor, easily integrated with Domino.

BUT WAIT!

Why would I share all this with you?  Why would I want to show you how to use this without CoexEdit?  Because you could get all this and also be able to edit the content in the Notes client, and have it look and work the way it should.  I am confident you will find the need and desire to do this, and if you have built a database using the sample or something simple, it would take a matter of a couple of minutes to convert your database to use CoexEdit.  You could even make one simple agent and have all the images and attachments store inside the documents they belong in.  So, I have a vested interest, I'll admit, but even if you never need it, I hope this database works for you.

Technorati:

Copyright © 2006 Genii Software Ltd.

What has been said:


437.1. Greg Walrath (02/23/2006 03:00 PM)

Have you found a way to get an editor like this on a form twice? We have a need to have someone edit a document and enter, say, English and Spanish on the same page at the same time.


437.2. Ben Langhinrichs (02/23/2006 03:08 PM)

Certainly. I am not sure I tested the Multi-Field version without CoexEdit, but it would be trivial to get it working. The only real change would be changing the WQS agent to check the form and set all three fields (or two in your case) to passthrough HTML. Just take a look at the multi-field form and subform and let me know if you have any difficulty getting it working. One clue, you may need to change the id of the fields to match the fieldname, as it is slightly different with CoexEdit.


437.3. nilesh (06/13/2007 11:00 PM)

Can I creat create multiple hotspot link on same image ?


437.4. nilesh (06/13/2007 11:00 PM)

Can I create multiple hotspot link on same image ?