logo

Domino Rich Text In The Browser, Advanced

The last article I wrote - Domino Rich Text In The Browser - introduced the idea of edting WYSIWYG HTML in the browser without needing to use any Java applets. The text was stored as PassThru HTML, giving the appearance of native Rich Text. It wasn't quite the Holy Grail of being able to edit native Rich Text in both the client and a browser without losing any formatting. However, if your users don't use the client, it's a nice solution and worthy of a read.

This article is going to take it a few steps further, getting a little more advanced. First we will look at how to personalise and customise the editor. Then how to extend the functionality of the editor by using some additional plug-in modules. Then we'll look at how to extend it by adding our own functionality. To finish off I'll make another sample database available that includes these extra features not included in the last article.

Personalising The Editor:

Adding new features is all very well, but sometimes less is more. What if you don't need all the icons that come with the default editor? Well, it's easy to use as little or as many of them as you like. Let's see how.

Remember for the default editor we added it to a form using the following simple JavaScript, called from the page's onload event:

function initEditor() {
var editor = new HTMLArea("Body");
editor.generate();
}

Well, when we want to personalise it we simply add a few extra lines that create a config object, as below:

function initEditor() {
var config = new HTMLArea.Config();
config.statusBar=false;

var editor = new HTMLArea("Body", config);
editor.generate();
}

This simple example creates an editor with no status bar. Notice how we created the config object, made a change to it and then passed it to the new HTMLArea object via its constructor method.

You can do alsorts of stuff with this config object. If you want to over-ride the default toolbar you create a new one like so:

config.toolbar = [
[ "bold", "italic", "underline", "strikethrough", "space","separator","subscript", "superscript", "separator", "insertimage","htmlmode" ]
];

This gives the user a limited number of features. One of those missing is the ability to change the font face and size. To change the default font of the editor you can use this line:

< co>config.page Style = 'body {font-family: verdana,sans-serif;font-size:12px;} ';

The page you end up with would look something like this.

How much you personalise the editor is down to you. For more information and help read the reference page.

Adding To The Editor:

As with all great software the HTMLArea editor is built in such a way that it is easily extended. It's easy to add more features to it, module by module. You can either download these modules or write your own.

The editor download includes the following plugins:

  • Spell Checker
  • Table Operations
  • Context Menus

Enabling them is easy. But first we have to make sure we have all the required files. If you've downloaded a copy of the HTMLArea 3 zip, you will see it contains a subfolder called plugins. This contains the files needed for them to operate and they need to be kept in this same folder structure to work properly. To do this in Domino we add them as File Resource elements, as below:

Notice how I changed the names of the elements to match the folder structure of the original files. This fools the editor in to believing they are where they should be.

With all the required files in place we can then enable the plugins in the editor. This is really easy and just needs a couple more lines of code:

HTMLArea.loadPlugin("ContextMenu");

function initEditor() {

var editor = new HTMLArea("Body");
editor.registerPlugin(ContextMenu);

editor.generate();
}

Simple, isn't it. You can add more plugins in the same way. That's how I created this form from the demo database.

Extending The Editor:

It's all very well making the most of what you're given, but you sometimes need that little extra something. When this happens you need to write your own features. This part isn't as well documented, but a little hacking reverse engineering can get you a long way.

To test the theory out I decided to create a button that would be useful in its own right. Its function is very similar to the Insert Link icon, but it lets us insert a link to a Notes document from within the database.

Because the functionality is so similar to the existing link button, all I had to do was pick apart that feature and recreate something very similar. The first thing I had to do was register a new button with the editor, like so:

config.registerButton({
id : "createdoclink",
tooltip : "Insert Notes DocLink",
image : _full_path + "images/ed_doclink.gif",
textMode : false,
action : function(editor,id) { editor._cr eateDocLink()} }
);

config.toolbar =
["bold", "italic", "underline", "strikethrough", "space","separator","subscript", "superscript", "separator", "insertimage", "createdoclink","htmlmode"
];

Here we've created a new button called "createdoclink" and then included it in the toolbar, between the image icon and the html-mode icon. The result looks something like this.

When you click this button it called a method of the editor object called _createDocLink(). We told it to do this in the config lines above. Now we need to add this new method to the editor object. Because it's so similar to the function called by the link icon I just made a copy of this function and pasted it in to a new JS file called custom.js.

Note:It's in a separate file so that it doesn't get over-written by any upgrades you do in the future.

The function is very similar apart from the following line, where I made a change:

this._popupDialog("../link?openview&count=10",

The original function opened this HTML file. The new function opens this view instead. The view is a part of a $$ViewTemplate, on to which I pasted all the HTML from the original link dialog. I then created a view that simply shows all other documents and, when clicked, adds their URLs to the dialog's fields, ready for use in the editor.

To make sure that the _createDocLink() method is available we need to import the custom JavaScript in the form's HTML Head Content:

I've described this in brief because it's not really that complicated and to describe it in full, step-by-step, would take far too long. You can see how it all fits together in the custom form in the sample database.

Summary:

What I've covered here are the basics of making the most of the HTMLArea editor. If you want to do something different then this should at least point you in the right direction to get started. Hope you enjoy it and find it useful.

Woops. Nearly forgot the sample database ;-)

Feedback

  1. Web to Notes style

    These articles of "Rich Text in Browser" are exciting, but the application requires that the texts introduced in the Web arrive with the same style at the Notes Client. Some of your articles will contain that solution?

    Thanks

      • avatar
      • Jake
      • Thu 7 Oct 2004

      Re: Web to Notes style

      The next article in the series talks about editing the same text in both the browser and the client. Expect it within the month.

      Show the rest of this thread

    • avatar
    • Jas
    • Mon 11 Oct 2004

    A different approach on R5, need help

    Hi All,

    I have implemented the same on R5. I wanted to include all the files in a database but copying all the file elements would require major work. A work around this was to copy all the files in a folder on the server under "html" folder. I can now call all the files from my domino database.

    It works fine. I'm trying to get the value of the "Body" field via js. This returns a blank value. But if I "Toggle HTML Source" through the HTMLArea buttons, it works fine and returns back the value of the text area.

    Any help is appreciated.

    TIA.

    Jas

      • avatar
      • Jas
      • Mon 11 Oct 2004

      Re: A different approach on R5, need help -

      Was able to get the value from the text area using editor.getHTML(). editor is the js object.

      Jas

      • avatar
      • Sam
      • Fri 15 Oct 2004

      Re: A different approach on R5, need help

      Hi, Jus!

      I am wondering how did you manage to work it in R5 - the method GetUnformattedText() - which is crucial part of this design is not available in R5?

      Please advice.

      Thanks, Sam

      Hide the rest of this thread

        • avatar
        • Jas
        • Wed 3 Nov 2004

        Re: A different approach on R5, need help

        Sam,

        Sorry for the late reply. I didn't use the method which Jake has used. Instead, I had a computed text in which I created a text area which is used to display the HTML editor. I also created a hidden html text field with the same name as the text area. Now while submitting I use editor.getHTML() and get the html behind the text area and copy the value to the hidden field. So when I save the document, html is saved in the hidden field.

        HTH,

        Jas

          • avatar
          • David Schmidt
          • Thu 4 Nov 2004

          Re: A different approach on R5, need help

          I think there's a 64Kb limit for text fields, use richtext with LS method GetFormattedText in R5 and richtext with LS method GetUnformattedText in R6.

            • avatar
            • Neil A
            • Tue 9 Nov 2004

            Re: A different approach on R5, need help

            Or don't bother with the wqs and bang square brackets around the body field. I put an empty span tag after the first square bracket to make it pick up the passthru and the same before the last one. Also used the image management stuff from Alan Hurt to drag in images stored in the document. Just been experimenting but looks like it works.

  2. Did you get the spellcheck working?

    I have had some trouble getting the spellchecker to work. It may be a function of the fact that I am on shared DDN servers ... I have tried relocating the cgi/perl file to the idea location and pointing to it there ... but it times out/locks up. Any words of wisdom?

      • avatar
      • Jake
      • Fri 15 Oct 2004

      Re: Did you get the spellcheck working?

      I didn't manage to get it working either. Mind you, I didn't try too hard either. Let us know if you have any luck.

      Jake

    • avatar
    • John
    • Fri 15 Oct 2004

    Line spacing

    I must say it's impressive but i have a query. It seems that the line spacing is double. How do we make it have a normal line spacing.. Thanks

      • avatar
      • Jake
      • Fri 15 Oct 2004

      Re: Line spacing

      Are you pressing enter after each line? If so, you'll get a <p> and some extra space.

      Otherwise you can alter the line spacing using CSS and the same appraoch described in the article for changing the styling.

      Jake

      Show the rest of this thread

  3. Browser compatibility

    Won't work in my Opera. Have anyone checked it with Mozilla or an old Netscape? What about Macs?

    Denis Krukovsky http://dotuseful.sourceforge.net/

      • avatar
      • Alan
      • Thu 21 Oct 2004

      Re: Browser compatibility

      If you look at the HTMLArea page (http://www.interactivetools.com/products/htmlarea/) you can see that it is only for IE 5.5+ and Mozilla 1.3...so at this point no opera or mac

  4. Retrieving the URL at Insert Notes DocLink button

    Hi Jake,

    This article is really great. Can you tell me where is the javascript code that builds the "<A HREF..." to the HTMLArea field when we click at the OK button at the Insert/Modify DocLink form oppened by the new "Insert Notes DocLink" button?

    I'm trying to customize it a little but I can't find this little piece of code.

    Thanks,

    Heubel

    • avatar
    • Don
    • Thu 18 Nov 2004

    HTMLarea with XHTML compliant Domino pages

    Just thought to share my experiences: During rebuilding our company website I tried to use the techniques in this article combined with the excellent "Domino XHTML forms" article (http://www.ferdychristant.com/blog/articles/DOMV-623N9J) by Ferdy Christant and found some limitations. Domino will not render RichText fields into <textarea> tags (intentionally - we must avoid Dominos FORM rendering edit mode for full W3C compliance) when used with "Content type=text/html", which seems to make saving the HTMLarea content into a RT-field impossible. After a full day of struggeling with all sorts of hidden input fields, web query save agents and JS, I found a simple solution which works like a charm. I'm not finished yet with all the CMS work, but this could also guide the way towards a combined Notes/Webclient CMS.

    If anybody likes to know how, I will offer the raw NSF file and some comments, just let me know.

      • avatar
      • Don
      • Fri 31 Dec 2004

      Re: HTMLarea with XHTML compliant Domino pages

      Addition: I should mention that my solution does not convert the HTML tags generated by HTMLarea into classic Notes Rich Text, but places the HTML as text into a RichText field. I'm still in the process of finding a solution on how to cconvert an HTML string into rendered Notes Rich Text (maybe a java WebQuerySave agent will do). Don

    • avatar
    • Kermit
    • Wed 15 Dec 2004

    Double Body fields

    I am using this in my application and I discovered the next problem.

    After saving the document the item "body" exists two times. The first one is emtpy and the second one is filled with the html code.

    If I use this item with "getfirstitem", I get the wrong (empty) Body item.

    Does anyone know to prevent this ?

    Thanx

    • avatar
    • Don
    • Thu 20 Jan 2005

    HTMLarea alternative

    There is an alternative. Smaller and easier to implement: TinyMCE at http://tinymce.moxiecode.com/ Found via http://www.ferdychristant.com/blog/archive/DOMM-68QM73

      • avatar
      • Arjan
      • Wed 26 Jan 2005

      Re: another alternative

      http://home.earthlink.net/~alanwhurt/editormain.htm

      • avatar
      • Arjan
      • Thu 27 Jan 2005

      Re: HTMLarea alternative

      I like this TinyMCE panel! Anyone build this into a Notes db succesfully?? Please share the db, I´m having problems using this one in my apps.

      Arjan

      • avatar
      • mark
      • Fri 25 Mar 2005

      xinha

      There is a compatible upgrade to HTMLAREA available at http://xinha.gogo.co.nz/

      Haven't tried it yet but it claims better support for Mozilla browsers & htmlarea does seem a bit flaky there. There are supposedly other improvements too.

  5. Excellent !! But images are not uploaded...

    What a great work ! Congratulations from a french reader since three months !

    I noticed a important difference between notes client editor and this HTMLArea editor : the inserted images are not uploaded to the notes server. The user must specify an url and a <img> tag is inserted. But no upload.

    I'm going to try to fix this problem by adding a few things to the QuerySave agent . I work in R6.

    I'll inform you of the progression of this issue.

    Again, thanks for your work, this will make my Intranet work better !

    Benoit

      • avatar
      • mark
      • Fri 25 Mar 2005

      Images can go in other docs

      I like this - thank you very much Jake.

      I'm putting images in separately - users can open a second window to add an image and see a view of images to get shortcuts.

      It works well in IE but the insert image popup isn't accepting input in Mozilla & Firefox yet.

  6. font size

    Hi, Excelent work, congratulations. I would like to know, how can I use font size 11pt ?

    Thanks.

    1. Font Size CSS

      Is there a way for me to put in a style sheet. how do I reference it so users simply select it from the menu (e.g. instead of selecting Heading 1 they select style 1 such that I can define the style.

  7. Making the full window work.

    Does anyone know why in the advanced form the "Full window" does not work?

    See this-->

    http://codestore.net/apps/htmlarea.nsf/vwAll/921BEF1D167902AB8625708A004A50D4/$f ile/Codestore.JPG

  8. Editing Rich Text in BOTH the Web and Notes Client

    I can't seem to find the updated article on where you were going to discuss editing Rich Text in BOTH the Web and Notes clients... I have read your two articles in making the web interface more user friendly when it comes to editing Rich Text without the use of the Domino Java Applet... please point me in the right direction... Thnx!

    1. Re: Editing Rich Text in BOTH the Web and Notes Client

      Like Petson Chan, I am looking for Solution to edit Rich text data both in Web and Lotus Notes. I more addition to it is that user will also add the attachments in the RTF field in Notes. This should be visible in the appropriate RTF field in Web. User should be able to add and delete attachments from it.

    • avatar
    • David Schmidt
    • Fri 17 Feb 2006

    Spellchecker - AJAX version

    http://me.eae.net/archive/2005/05/27/dhtml-spell-checker/

    1. Re: Spellchecker - AJAX version

      Wow, cool link, thanks for sharing!

    • avatar
    • MOOG
    • Tue 9 May 2006

    Toolbar

    Where will a set the size of the toolbar. It´s to big for my form just now. I will set the size to 250 px. If a change with config it only change the area where you type your text?

    kind regards MOOG

  9. highlight

    i want to highlight a text in a current article while browsing..how?

    • avatar
    • Port
    • Wed 12 Mar 2008

    Really superb:How to get the border for the editor

    Hi Jake:

    Congrats on your wonderful editor functionality..its really interesting.Now that i wanted to remove the status bar and add border to the editor.I figured the way to remove the status bar.help me with the border issue.Thanks in advance

    Regard Port

    • avatar
    • ron
    • Wed 19 Nov 2008

    strange error

    I keep getting the error [ Line:12 Error:'HTMLArea.I18N.tooltips' is null or not an object ] does anyone have suggestions on how to solve this problem?

    I'am running 7.02 (client and server)

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


Navigate other articles in the category "Forms"

« Previous Article Next Article »
Domino Rich Text In The Browser   Sensible Web Navigation

About This Article

Author: Jake Howlett
Category: Forms
Keywords: rich text;

Attachments

htmlarea-v1.5.zip (339 Kbytes)

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »