Customising the HTMLArea Editor
If you've played with the "simple" HTMLArea demo I've been linking to you might have seen this dialog window that lets you insert a "web link". It's easy to use. Select the text/image that you want to make a link and press the link button. The window appears and you type in the link's address and press ok. Hey presto - a link.
This is all very well for adding web addresses, but what about our Domino databases where most of the links are between documents stored in the same database? We can't expect the users to know the address (i.e. 32 char unid) of each document can we! We need a way of creating "DocLinks". This is what I've just done to the "custom" HTMLArea form, as below:
The customised form has a new button on it, with the Domino 6 doclink icon - 
. Clicking on it displays the customised link window, as below:
The list of links you can choose from is an embedded view of the other documents in the database that use the "custom" form. Whereas the default link window shows a static HTML file we are now opening a $$ViewTemplate instead. Clicking on one of the links adds the document's UNID to the URL field. This is all we need in to use to produce a link as we can make them all relative to the one view. At the moment you need to select some text to be made in to the link. If you have nothing selected - no link. In the past I've used this method on applications for clients and, when there's nothing selected, inserted the DocLink icon and wrapped the link round it.
Hopefully this simple example gives you a taster of what you can do with HTMLArea to tailor it for use with Domino. In the past I've also added custom buttons to insert images stored in the database. The window displays these images and you simply click the one you want to insert it. Customising HTMLArea isn't the easiest thing to do, but then it's not that hard either. There's enough to it to warrant an article and that's what I plan on doing. The curious can work out how it's all done by looking at the source HTML for the form. Nothing is hidden! The impatient can mail me if they want a copy of the database, as it stands.
Skip to the 
You can subscribe to an individual
Good stuff! I will look more into html area. Like you said this could be good for intranets ...
Al
I've used HTMLArea on my intranet in the same way as Jake has shown above.
A word of warning though, if you intent to modify the 'onclick' property of the link you can't do it with the version of htmlarea.js supplied with the latest release (3.0 RC1) . You need to grab the latest release from the public CVS: {Link}
The latest release of this file is 1.79, but it was fixed in r1.75 . Check your version of the htmlarea.js file to make sure.
hi jake,i used the editor,but there's a question, when i click the "enter" in the content area, the distance between two lines is too large. i check the html code, it show not "<br>" but "<p>".how can i fix it.
bad english,sorry.
lamon,
Simply use css to control the <P> tag.
Thanks Andrew. I had no idea! This has already fixed a few bugs that I had found. Cheers!
Lamon. I've noticed this behaviour too and can't seem to work out when and why it uses <br> over a <p>. It seems that different browsers use different approaches. Strange! Personally I would rather see the default new line become a <p> and have maybe ctrl+enter be a <br>...
Enter=P
Shift+Enter=BR
Lamon,
You can change the behaviour of Enter <P> and Shift+Enter <BR> to reverse them. I would recommend looking at the HTMLArea forums on how to do that.
Jake,
I have done something similar to what you are doing here. My requirement was to let the users attach PDFs and create link to these attached PDFs from the HTML Area editor. Worked pretty well.
This shift+enter thing only seems to make a difference in IE and not Mozilla. Nice idea though. Thanks guys.
The 2 platforms use their own proprietry rich text editor applications. The mozilla one is called 'Midas' and the IE one is... umm , no idea.
Using the editors you pretty much have to put up with the HTML they output, which is different for both platforms. Midas has a 'useCSS' setting which will change from using span elements with inline styles to using old style 'b' and 'i' elements. The IE editor however always uses 'strong' and 'em'.
This is problematic because I can't edit content in IE and then again using Mozilla (I can't unbold text in Moz that was made bold in IE).
Using the editors is quite different from simply wrapping selected text in HTML tags and they support a whole bunch of editor functionality too, like undo/redo, ctrl+c / x / v, image resizing, table editing widgets (in Midas) and so on...
So I guess if you want the editor goodness you have to put up with the HTML provided. You can of course code your own button for 'Bold' (for example) to make it put 'strong' tags in both editors but the user can still type ctrl+b and trigger the standard editor behaviour. This means you'd also have to catch the key combo to prvent default behaviour etc.... it soon turns into a lot of work!
Most people I've seen just ignore the problem.
Thanks all,I Know The Method To Use Shift+Enter.But Many End-User Don't Know It,I Want To Look For A Auto Method.
G'day!
Following your forum for a while, and am most impressed. Keep this going!
Regarding the editor. Very handy, must admit, this stuff is very reusable, and ideal for managing any web based content.
After trying it out, there is one minor thing that I couldn't get to work:How do you add images from the local harddrive and use the preview function with it? Is there something I'm missing ?
In IE rich text editors are based on MSHTML.
You can use a regexp function to replace the <strong> tags with <b>
MSHTML (IE > 5.5)
{Link}
{Link}
Command ids:
{Link}
MIDAS (Mozilla, Firefox)
{Link}
{Link}
Some other editors
{Link}
Does anyone else find the following probs with this editor:
1. Really slow to load.
2. IE/JS timeout error when switching between rich interface and HTML editor
Is it possible to post a demo database here??? We all are curious....
This editor looks cool, I particularly like the context menu and dynamic tree area at the bottom.
Since its MSHTML in the editor you can achieve similar results (IE5.5 and IE6x) using a contenteditable="true" attribute in DIV and SPAN elements. You're then left to build your own interface to add and edit rich objects which in some circumstances can be a boon. Allowing the developer to control the level of rich content the editable region will support.
Yes it can be slow Ed (although that's probably as much down to this site as anything) and can sometimes throw errors. It's not perfect by any means, but it's the best I've seen. Well, the best free one that is...
This is really great stuff and a reason to move to Notes 6. I'm currently using Notes as an IntraNet Solution because of the Rich Text support - we all use Notes mail so folks know how to make stuff look good. The biggest challange in allowing "contributors" to submit content to the web is to get it into html and out to the the web server. Java solutions are simply to expensive and require to many resources, products like InterWoven's TeamSite offer cumbersome and complex solutions. Notes is simple, fast to develop and it really amazes people with how fast and easy it all goes - workflow, security all built in.
The problem is that content comes from many databases and needs to have a single unique look or wrapper. The current solution is to include wrapper elements in all the database, but this is proving to be very unmanagable. So, I want to develop a single wrapper DB that would house the look and feel elements and "pull" content from the various DBs. Stuck on displaying documents without the support servername/DBname/DisplayForm in the URL.
Any ideas?
This works great on the browser, but is there something similar available to allow HTML editing on the client? For example, if I open up a form in the client and put "<font face="Arial"><b>This is a test</b></font>" in a text or rich text field, save, then view the document in the browser, I'd like to see the HTML rendered so that it shows "This is a test" in bold Arial font. Anything out there that allows this?