HTMLArea is dead. Long live TinyMCE
When I started using HTMLArea it looked like the best of the bunch. Since then I've found an alternative called TinyMCE, which is fast becoming my preferred WYSIWIG editor.
The trouble with HTMLArea is that it appears to be a dead project. The last release was v3's RC1, which was almost a year ago and introduced as many problems as it fixed. It became "clever" and started to rewrite HTML. For me it became unusable.
Thankfully, we've now got a decent alternative in TinyMCE. The editor is really slick and it's even easier to plugin to Domino than HTMLArea. Best of all the project is alive and kicking. The latest release is barely older than a week. There's also a forum, which the developer frequents. Yesterday I had a question answered within a couple of hours! I can feel comfortable using it in client projects, knowing any problems can be solved.
Choosing the best third-party plugin for the job is sometimes about finding one that will be "supported" as much as it is about how it looks. Obviously using any free code comes with risks. Who's to say TinyMCE won't be dead this time next month?! It's all a big gamble, but I know where my chips are going in this case.
Anyway, I've got it working with Domino and created a new template to house it. You can see it in action or download the NSF.
Note: For no apparent reason you can only align the toolbar with with the top of the editor in Advanced mode.
To-Do: I need to add custom buttons for inserting images/doclink, like we had in the Custom HTMLArea form.
Skip to the 
You can subscribe to an individual
Thanks for mentioning this Jake. I've been looking to replace the web editor in BlogSphere as the one I've been using only works in IE and i notice thatthis supports Mozilla and Firefox and probably a few other.
Thanks for the demo!
We have been in the process of evaluating many editors for one of our custom Domino applications. This is one that we didn't have on our list.
Looking at the "full featured example" really shows the power of this editor. It's great to see a spell-checker plugin as this feature was one reason why we looked at HTMLarea.
Is it possible to default in some text? Does it mess with the Richtext at all if you default in a few paragraph headers?
I'd like to be able to replace 3 rich text fields with 1 and use this editor. But, my users would like the headers that are on the current fields to be included so they know what goes where...
Lance. By default (I think) it loads a file called /editor/blank.htm (when the textarea is empty?). If you edit this page you can default some text. Not pretty but should work. Although giving the RT field a default value should work as well and it shouldn't mess with it.
Since the Notes Client does support JavaScript I was wondering if you actually could embed such an editor in the client. This way you would edit HTML in both environments and the conversion hick hack would go away. Ever tried that?
:-) stw
I've not used the Client for year but my understanding is that it supports the bits of JavaScript that it wants to. Don't expect a page that works in the browser to work in the Client. I'll stake my reputation on this - these editors will NOT work in the client!
In order to use JavaScript in the client, there are a few things that you want to remember.
(1) If you prefer to use external JS files, you must use a JavaScript library for the client to recognize it. On your form design, you will need to Insert --> Resource and select your JS library.
(2) If you choose not to use external files, my experiences have shown me that all of your JavaScript coding really needs to go into the JS Header section. If you try to do in-line scripts, you will get the results that Jake mentioned.
(3) Since you are using the Domino Designer IDE, you are limited to the version(s) of JavaScript that are supported in the IDE.
If you take Doug's advice and place all the JS in a script library you may be in for a surprirse. Go on, I dare you, paste everything out of tiny_mce.js in to a JavaScript Library in Designer!
Well, no, don't. It will crash. Well, at least mine does.
Hey Jake...
Have you tried this one... {Link}
Appears to be more polished than TinyMCE.
Patrick
Patrick. The key to these editors working with Domino is that they use a standard <textarea> element (which is how Notes represents a rich-text field on the web). FCKEditor doesn't. It's initialised like so:
______________________
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath='/FCKeditor/' ;
oFCKeditor.Value= 'This is some
<strong>sample text</strong>. You are
using ...";
oFCKeditor.Create() ;
______________________
So, you're expected to pass its value as a string. With Domino you would have to make the line from above equal to:
oFCKeditor.Value=myForm.Body.value;
But the value would probably be "This is some <strong>sam..."
Seems like an extra complication to me and I like the way TinyMCE works with a standard field. I'll give it a whirl though.
Hi Jake...
Thanks for that. You could use the Javascript "escape" and "unescape" functions on the string.
Also, the HTMLArea is not dead. It has moved to another site... {Link} It's still free and they are working on a 3rd version. It's in BETA at the moment.
Check this forum link {Link} The file attachment is in the first message of the thread..... i.e. {Link}
Later
Patrick
Just because you said not to, I had to try putting the tiny_mce.js in to a JavaScript Library in Designer.
The same result, a crash!
This just reinforces the intent of my previous post. You can use JavaScript in client side applications, but it is limited, very limited.
Awesome demo Jake, I plan to embed it in a future version of my blog template.
I will probably limit the amount of options to the users and try enforce XHTML, I'll let y'all know how it went later.
Patrick. Thanks for the link. I didn't realise there had been a new push to the V3 effort. Still, I went off v3 after I found it messed with the HTML code you entered. Enter a <script> tag and it does alsorts of weird stuff. Probably to try and prevent script-kiddies from hacking. Annoying when you know what you want to enter and it won't let you.
The same is true of any onclick events you add.
I'll "upgrade" and see what happens...
Doug, I'd think that the bigger limitation is the immutable document than the amount of script you can pile into a library. Remember that the document (the form, in this case) is rendered to Notes CD before display. You can't even change the options list in a selector widget once the field has been translated to a widget + CD parms. The addressible document object model is small, and is almost completely about the data. An edit control is not data, and a text (or rich text) widget is not a <textarea>.
Patrick / Jack
It IS possible to use FCKEditor with <textarea>!
I'm currently working on implementing FCKEditor in a Notes database; at the time of this writing it is based on the 2.0 RC2 release. FCKEditor actually gives some problems regarding relative URL's which I'm working on to solve and document to Frederico (the creator of FCKEditor). Also the image library will be different for the Notes version than the other PHP/ColdFusion/ASP etc. But this is still in pre-alpha :-D
John. Relative URLs is a problem with all the editors I've used and I'm still to find one that fits my needs.
What I want is an editor that works in conjunction with the page's <base href> setting and can work across different replicas of a DB that have different file-names.
I had a play with a little while ago and was impressed too. It seemed much simpler than HTMLArea. The only downside was that it was mich bigger close to 100K as opposed to ~25k for HTMLArea3...
But I don't know if it's too much of a problem on an intranet or something like that.
The most stupid thing happened to me. Your advanced and custom demos didn't work for me in Firefox. After pulling my hair out I discovered that my Adblock extension was blocking images that have ad*.gif in their path e.g. {Link}
Pretty crappy filter rule...
After cleaning my filter rules I can enjoy your great demo.
This is great. Thank You Jake for doing all the Domino "integration" work.
Am I missing the obvious? I can't find the way to change text size.
AcK!
Elijah
Why do the images/icons refresh so often? Seems that every click in the textarea forces some sort of refresh. Very annoying. XP wIE6
Even with a large network pipe, it still takes a bit to load this thing. With three (3) textareas it has to down load about 150 images... Thats not pretty.
Lance. Follow the link in the blog body above called "a question answered". The answer's in the there.
so noce. It contributed to OpenNTF by devising the method of my integrating TynyMCE and nsf as
easily as possible.
Simple customize for using Firefox on blogsphere 1.3.1
{Link}
Jake, like the demo. Could prove very useful.
Just one question, in the advanced editor, when I try to add an image I get a new window pop up with a "General Error" message. Im running MSIE6 on XPSP2.
Any ideas as to what might be causing this.
Regards
Lee
Lee. It's something I meant to fix but forgot about. Look at the URL for the page in the popup, it's:
...mce.nsf/editor/themes/advanced/image.htm?src=
That's a file resource and the editor appends an argument. DOmino doesn't like argument without an open in them. So the code needs changing to call:
...mce.nsf/editor/themes/advanced/image.htm?open&src=
Jake, it wouldn't be possible to also make an R5 version available of your demo, would it?
Peter. No. Not easily. R5 can't replicate the directory structure of the required files. You would have to move them to teh file system.
Did you have to do something special to get this to work? I have everything showing very nicely but when I save the doc, the Rich Text field in question remains empty.
And as I don't have an R6 client available to check your template...
Congrats on the new design by the way! Do you also design your own icons?
Thanks so much for the Domino implementation. Have you ever fixed that Add Image problem. I can't find where in the code to add "Open&" to "image.htm?src="
I found it. It is in the "editor/themes/advanced/editor_template.js" file. Just search for "image.htm?src"
I used your HTML Area code in a domino app and am about to try this instead as HTMLArea is so buggy. Two things of interest.
1 I added code to the Add Image interface of HTMLArea so that it would know what attachments were in the Notes doc and then put a drop down list of the images into the interface. That way users could attach an image and then use it in their text (my code takes care of the urls). I will look at doing it in this version and then somehow releasing the code back. I'll get back on that but my current thought is to do a separate new button and interface for it.
2 The large number of components in these things makes updates daunting. Any thoughts on whether you could leave it in its own nsf and use with another nsf. Anyone tried this?
Cheers
Gareth
Gareth. There's no reason at all you can't store HTMLArea in its own NSF. As long as Anon access is reader it will work and is probably the best approach in the long run. Although adding it to the Domino\HTML Folder on the server may be even better.
I modified the image form to show attachments on the documents as well. I'd thought about updating the template but haven't got round to it yet. Need to soon as the .js file used is really out of date!
Glad you like it Jake, keep up the great work, our website got quite a few hits from your blog!
Open-source gives ppl options, we like to give ppl options.
Just seen your blog and TinyMCE is just what I need for my next project. Thanks for the tip!
Bob
Just wanted to add that a RC-3 version for HTMLArea was released somewhere in February (which included a lot of bugfixes).
Seems now however that the original project is closed (see Link) but continues under another name: Xinha {Link}
Mark
Thanks Mark. I'll have a play with that when I get the chance.
This really looks like a tool we could use, however, all i manage to get is this popup on a simple domino form.
Error: Could not find the template function: TinyMCE_default_getEditorTemplate
Could anyone help me with this?
With Kind Regards,
Jean-Louis van Halderen
Is there a domino 5 version of this solution...
HTMLArea is dead. Long live TinyMCE
Kurt. No there isn't. For two reasons:
The WQS agent relies on a method that is Domino 6 only in order to convert to PassThru HTML.
Adding all the file resources is a LOT easier in D6.
<<I'd thought about updating the template but haven't got round to it yet.>>
Jake,
Do you still intend to update the template?
Erwin
Erwin. It's not high on my to-do list, but it's there. Don't hold your breath.
I don't know if you will get alerted to a post to an old article - but just in case...
I have just acquired a need for a db where web users can post HTML, so I remembered TinyMCE from this article and it looks great.
Only problem is when I redisplay the document on the web, all chevrons are converted to < and > so not recognised as tags. I have tried setting rich text field as 'save as mime' or as part of html text, but no luck.
Is there any way around this?
Regards
Jake, thank you for the wonderful job.
I believe this article helps many lotus notes developers. 1 question, it seems the submitted rich text does not retain the fonts information. It is reset to 1 particular font. Is that purposely done by Tiny MCE ? Thanks in advance.
Hi Johannes. The font in the editor is controlled by CSS. There's no way for you to set it using the editor.
Hi, jake,
Are you storing the codestore blogentries in a richtext field? if so, are you using MIME ? , do you use QS to store RT field content in a textfield or how do you display the richtext fields in the blogview ?
Thanks
Thomas. Blog entries are stored in a plain text field.
The link "a question answered" is not working. Could you please place your comment under the comments section itself? Because the question is still valid, whenever we press the enter key or press any action the page refreshes. How do we avoid this ?
I think that the problem with Notes crashing when you paste .js-files into script libraries is easily fixed. I've had this problem earlier and all I had to do to fix the problem was make sure that the linebreaks in the textfile was of the right kind before I "copied and pasted".
I was wondering if there's a way to import a set of images/files as Shared Resources while keeping the path information in the name. If not, how was it done in the example database? By hand?
@ Thimo
I was just asking mysely the same question.
{Link}
"If you use a WebDAV-enabled client such as Windows File Explorer, you can move the entire directory into the database with a single drag-and-drop operation."
Hm. Seems to not work as advertised in Win Xp.
(Sorry for Comment Spam Jake)
Here's the reason why it isn't working for me on Win XP by default. You need IIS running for WEBDAV to be enabled. Instructions here.
{Link}
Seems worth the hassle for large directory structure imports.
Jake, any interest of getting TinyMCE to work within the Lotus Notes client? We have users who do not want us to revamp their CMS editing tool to HTML from Notes (other priorities). It would help me a lot if I could get this tool to work within the Notes client.
..... Leo
The image button don't work...
Hi Jake,
I have uploaded and actually upgraded your db model to the next version of tinyMCE using the same domino model and it works beautifully. Two issues however - one - I cannot figure out how to only apply the text editor to ONE of three rich text fields on the page and TWO - the image uploader ALMOST works except I am trying to figure out how to set it to grab a list of images from inside the db which I cannot seem to do. Any ideas??
HEre is the line in the javascript header that references this list. the function.js references a getParam to retreive this...
external_image_list_url : "../example_image_list.js",
if the param external_image_list_url exists it renders the picklist. if not it shows nothing.
ALso do you know where I can specify just one field on the form to apply this whole thing to the way it works with htmlarea where you can define the name of the field?
Thanks, Johanna
FOLLOWUP:
Hi I actually got this whole advimage piece working by creating a page in domino that acts as the "../example_image_list.js", file and has a computed text field to do a lookup and grab its value -works great! Now I just need to figure out how to tell this thing NOT to load on all THREE rich text fields on the form. Any ideas?
@johanna
you could use element into the Tiny configuration & give ids to those rich text fields.
In the element list would have to be the ids for the richtext that you want to load on.
Question. how did you succeeded the insert/edit image button to work?
if is opening <../image.htm?src=> which on my server always return bad request format.
Is on your server ? replaced with ! on domino commands?
Hello,
I want to find a solution to the refresh problem like Jinson George (Fri 10 Feb 2006 05:04 AM)
but --> the link "a question answered" is not working
Thx to help us
Hi,
I´m trying to use TinyMCE in my lotus notes application but after several attempts I couldn´t solve the problem.
First, I´ve previusly used HTMLArea and works perfectly but after I read this article...
I´d install all scripts and files like the nsf example and changed the html header to load new files.
The browser throws an error:
tinyMCELang is not defined
tinyMCELang['lang_bold_desc'] = 'Bold';
Thanks, Javier
Hi Jake,
I am able to use tinymce in domino without any issue, but when I tried to test it on one my domino server I am getting error "Access Denied" and not able to edit any content in editor. When I searched in Tiny MCE site, the error was something related to Cross Domain issue with IE only.
I have place all js and library files on same server, same database.
This is my development server address : ( on my local network )
http://prashant.com.my/editor.nsf
Please suggest how to overcome this issue.
Thank you
Prashant
Hi Jake - are you still supporting Tiny MCE in its upgrades? I have not upgraded since (I think 2006) and am nervous about doing this as it has been some time since I was working with the code. But now I still see quite a few bugs especially when editing tables with the older version - just curious if you have upgraded in the years since.
Best, Johanna