Friday, June 13, 2008

Slick integration between FCKeditor and Lotus Domino

Update 16.08.08: According to a commenter, Sinisa, the notes.ini modification is not needed (tested on Domino R7), so even less requirements.. :)

Before you read on. The integration requires you to set DominoDisableFileUploadChecks=1 in notes.ini on the Domino Server.

I found no satisfying integration-examples that included upload-support for FCKeditor, so I decided to try to make the integration myself. As far as I've tested, you can upload whatever you want, only limited by settings in FCK and Domino restrictions.

Flash animation of the integration in action. Shows upload of an image and upload of a flash game.

Although it was a bit hard to hack around Domino restrictions regarding uploading files, I finally found out how to make it work.

All that was needed was a bit of try, fail, retry, repeat, a simple upload-form and a little bit of Javascript.

Demo application


>> Download

The interesting bits are the fckconfig.js page, the demo form, and the fckupload form. Read Ferdy's article to understand how you can upload files to Domino without using a Domino generated File Upload Control.

Requirements for the demoapp:
fckeditor in [Notes/Domino-path]\data\domino\html\js\fckeditor
If you're not running the demo on localhost, DominoDisableFileUploadChecks=1 in notes.ini on the server.

Tested with FCKeditor 2.6.1 in FF2.0, IE7(Vista) and Opera 9.5 (go try it out).

36 comments:

rob.vandenheuvel said...

The demo looks slick indeed.
Opening the download file gives me the message: this database has local access protection and you are not authorized to access it.

Tommy Valand said...

Sorry about that. I fixed a bug at work today, where I use Notes 8. N8 automatically adds local encryption when copying/creating applications.

Could you try downloading the file again, and let me know if it works now?

If not, I'll reupload it from home, where I use Notes 7.

rob.vandenheuvel said...

Thank you Tommy. It works now.

Sinisa said...

Very nice!
Is the ini modification necessary? I did not do it but everything seems to work fine !? I tried image and file uploads...

Tommy Valand said...

Were you running it on a Domino server or on localhost?

I know it works on localhost without altering the notes.ini-file.

I haven't tested the upload without the setting on a Domino-server. The reason I thought it was needed was mostly because of Ferdy's article.

Sinisa said...

I tested it on the server... R7

said...

Sorry, i hava a question about the upload function of FCKeditor.

I created a new database in server, and copy all components ( including 2 views, 2 forms, 1 webpage, and 1 agent) in database, but the upload function still don't work at all.

The process stoped after clicked the "send to server" button, but there were no error massage for me to debug it.

Can you figure out what's going on in this error? many many thanks! >"<

Tommy Valand said...

Have you "installed" FCKEditor, as specified in bottom of the blogpost?

--
Requirements for the demoapp:
fckeditor in [Notes/Domino-path]\data\domino\html\js\fckeditor
--

said...

Yes, I have installed FCKEditor in the path of [Notes/Domino-path]\data\domino\html\js\fckeditor].

I download the demo database in your blogpost and put it into server, it can work perfectly, and create a new copy of your demo databse in server can work also!
but .... if I created a new database, and copy all component in it, it don't work.....

I think it must be something loss!! Should I do something else except copy components?

Many many thanks again! >"<

Tommy Valand said...

Most likely it's the upload-form that's changed.

Open the fckupload form on the web, view source, and see what the name of the upload field is (input type=file).

In the demoapp it's "%%File.c125746700522db9.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70"

In the JS-header of the demo-form, I change the name of the FCK upload-control to the one in the FCKUpload form. Otherwise the upload will fail.

Look for this line in the JS-header:
var fieldName = '%%File.' + replicaId + '.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70';

If the name of the upload control has changed, replace the existing one with the new. If the database you're working on is a template, compute the replicaid in the fieldname as I did in the JS-header of the demo-form.

The replicaid has to be the same as the db you're uploading to.

said...

It works now. Thanks a lot!!!:D

Smitix said...

Hey Tommy, Great tip, I recently used it to the editor to my Domino web page. The clients love it.

Today however I spent a lot of time trying to figure out why part of it broke the day we moved it into production. The "Send file to Server" button to upload an image stopped working and the log.nsf showed "HTTP Web Server: File Upload Not Allowed Exception"

What happened was that in preparing to put the application into production I must have modified the comments at the top of the form that has the File Upload Control. Whatever the reason, the offset for the fieldName variable specified in the renameFileUpload()function changed.

I wanted to share the experience for the next poor soul who encounters the problem.

Mark Crosby

Abeish Babu said...

Thank you Tommy. The editor works great. I just want to know other than uploading images and flash is it possible to upload a file as attachment.u

Tommy Valand said...

@Abeish Babu: You should be able to upload files using the Insert/Create link-action.

If you click the upload-tab, you can upload a file, and FCKEditor will create a link to the uploaded file for you.

Abeish Babu said...

Thank you Tommy. I checked it and it is working fine. Thank you very much for your quick response

Darin said...

Have you looked at making this work with xpages(8.5) yet?

Tommy Valand said...

Nope. Haven't worked so much with XPages..

Cansino said...

Hi Tommy, great integration.
We have included on a project and it works fine, do you know if it's possible to acess the image repository in order to reuse the previous images uploaded?
Thanks in advance

Tommy Valand said...

To re-use the images, you'd have to write some backend code to make it work.

I haven't looked into it, so I can't be of much help regarding that.

mtsadmin said...

This is an awesome find. I have been looking for this for awhile. Here's my issue and hopefully someone can help me out. I have the editor working with the upload with the exception of doing this inside an iframe. If I load my form in it's own window, the upload works great, if I load the form inside an iframe, the upload goes through all the steps but does not upload the file.

Any help would be great...

Colin

Tommy Valand said...

@mtsadmin: I don't know if you've read through all the comments..?

This is most likely your problem:
=================================
Most likely it's the upload-form that's changed.

Open the fckupload form on the web, view source, and see what the name of the upload field is (input type=file).

In the demoapp it's "%%File.c125746700522db9.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70"

In the JS-header of the demo-form, I change the name of the FCK upload-control to the one in the FCKUpload form. Otherwise the upload will fail.

Look for this line in the JS-header:
var fieldName = '%%File.' + replicaId + '.5c6ed0a0107a57a8c125746700522f3e.$Body.0.70';

If the name of the upload control has changed, replace the existing one with the new. If the database you're working on is a template, compute the replicaid in the fieldname as I did in the JS-header of the demo-form.

The replicaid has to be the same as the db you're uploading to.

MTS Admin said...

The fckupload form is not the issue. It works fine if I open the form in it's own window. The issue is uploading within an iframe. I have a webpage with 2 iframe. The center iframe src is a page that also has an iframe. I select to create a new doc from my left menu and open it in the iframe of the center frame. I think the issue has something to do with parent.onuploadcomplete...

Tommy Valand said...

Are all the frames/pages in the same domain?

MTS Admin said...

Yes, they are

MTS Admin said...

I will email you a copy of the db so you can see what i'm doing....

Tommy Valand said...

Ok..

MTS Admin said...

Thanks again for all your help. This works great now.

NotesSensei said...

Tommy, ping me on BleedYellow's Sametime and lets work out the XPages integration.

Tommy Valand said...

I'm more of a lonesome wolf when it comes to blog projects (I like to challenge myself). I currently don't have the need for XPage integration of (F)CKEditor. That's the reason I haven't done it.

If you want to do it, I'll be glad to help if you need it/I can offer any.

I prefer mail communication as that let's me decide my schedule.

>> Stefan Larsson << said...

Hi
Is it posible to create your own browser control to find uploaded files or files from another database?

Tommy Valand said...

Do you mean the "server browser" thingy..?

I'm sure it's possible, but I don't know how well documented it is, what should be sent from the server to the browser.

It looks like the FCKEditor-demo is down (only demos of the new CKEditor). There may be other sites that are running FCKEditor and the server browser.

If you want to try to integrate it with Domino, I suggest you use try to find a site that has FCKEditor+Server Brower, and use Firebug to see what the server sends FCKEditor of data.

>> Stefan Larsson << said...

Thanks for your response.

ok i try to find something on the net.
I have install the new ckeditor but stil need to find a way to browse my own picture gallery database.

I found this but i don´t have the knowledge to change it to work in domino.

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)


Thanks for your help
//stefan

Tommy Valand said...

Looks like CKFinder uses XML as input..

Folders: http://ckfinder.com/apps/ckfinder/1.4.1.1/core/connector/php/connector.php?command=Init&langCode=en

Files in the "Files" folder:
http://ckfinder.com/apps/ckfinder/1.4.1.1/core/connector/php/connector.php?command=GetFiles&type=Files&currentFolder=%2F&hash=1bd6b3f03554c369&langCode=en

I would think you'd have to make an agent or something similar to generate the XML, then set the URLs to the agents using CKFinder-options, or something in that direction.

Anonymous said...

Hi, great work!
One question: Why do I get two body-fields in the document?

Tommy Valand said...

If I understand your question correctly.

That is how Notes stores Rich Text fields (depends on content). In the demoapp, I think it's because content is stamped as Passthru HTML.

If you receive a mail with attachments, you will probably see more than two body fields in document properties.

Klaus Terman said...

Great article and demo database. Thanks alot, I just succeded in upgrading from an old fckeditor to a new slick ckeditor :-)