How to use TinyMCE

One of the more frustrating thing about a web application is that you can never truly duplicate rich text formatting capabilities of a desktop client.  And when you’re web enabling a Lotus Notes application, the difference becomes even more obvious.  Luckily, there are various very light JavaScript text editors, which offer more functionality than the standard out-of-the-box Domino text editor.  One of those editors is a very popular TinyMCE.

TinyMCE is used by many different web content managers, including Django, Drupal, Joomla and this very site — WordPress.  And you can use it inside of your Domino applications.  (I know that some folks been doing this for years, but since I’ve never used a 3-rd party editor in my applications before, so this is new to me.)

The nice thing about TinyMCE is that it is a lightweight WISYWIG editor, which is platform independent.  It is easy to integrate into any application with only few lines of  code.  And it runs under pretty much any browser.

  1. So, first of all, go here and download the latest version of TinyMCE.  You can even download various language packs, if you need a different language version of the editor.
  2. Extract the downloaded zip file and copy its contents to the html directory of your Domino server.  It might be something like d:\lotus\domino\data\domino\html.  The default directory name will be tinymce.  You can rename it, if you like, just remember what it is as you will need to reference it in the initialization code of your form.
  3. Next, build your form.  The easiest way to deploy a TinyMCE editor is to have hook into any text area on your form.  So create at least 1 RichText field.  If you want to control its appearance, you can use the style field on the HTML property tab.
    Body Field
  4. Now, you’re ready to add TinyMCE to your form.  In the HTML Head section of the form, add this 1 line of code:
    “<script type=\”text/javascript\” src=\”/tinymce/jscripts/tiny_mce/tiny_mce.js\”></script>”
    Make sure that the path to you editor matches your directory structure, in case you renamed it for whatever reason.
  5. Add the function to initialize the editor to the JS Header section of the form.  The function below loads the TinyMCE editor with all available options and buttons.  The beauty of this editor is that you can truly control what options and abilities you will give to your users.  Things like a spell checker, for example, are a must.  But you may not want to allow your users to create tables.
  6. tinyMCE.init({

    mode : “textareas”,

    theme : “advanced”,

    plugins : “safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, template, wordcount”,

    // Theme options

    theme_advanced_buttons1 : “save, newdocument, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect,formatselect,fontselect,fontsizeselect”,

    theme_advanced_buttons2 : “cut, copy, paste, pastetext, pasteword, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, undo, redo, |, link, unlink, anchor, image, cleanup, help, code, |, insertdate, inserttime, preview, |, forecolor, backcolor”,

    theme_advanced_buttons3 : “tablecontrols, |, hr, removeformat, visualaid, |, sub,sup, |, charmap, emotions, iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,

    theme_advanced_buttons4 : “insertlayer, moveforward, movebackward, absolute, |, styleprops, |, cite, abbr, acronym, del, ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,

    theme_advanced_toolbar_location : “top”,

    theme_advanced_toolbar_align : “left”,

    theme_advanced_statusbar_location : “bottom”,

    theme_advanced_resizing : true

    // content_css : “styles/editor.css”

    })

  7. Lastly, include the TinyMCE save function in your Submit code.
    tinyMCE.triggerSave(false, false);
  8. You’re pretty much done.

Now, keep in mind, that the text coming out of TinyMCE will be all HTML formatted.  This is not something that will look good opened in the Notes client, so, primarily, this works well for web only applications.  For applications used both in the browser and in the client, you may want to do some MIME to RichText conversion.

    16 Responses

    1. Alex, an excellent post.

    2. Thanks. Appreciate it.

    3. For applications used both in the browser and in the client, you may want to do some MIME to RichText conversion…
      or you could use CoExEdit that will do the job for you:
      http://www.geniisoft.com/showcase.nsf/CoexEdit

    4. And, you can deploy this on a Lotus Foundations server using native Domino web applications to produce exceptional apps for the Foundations and SMB:

      http://www.bobbaehr.com

    5. Sorry, Bob. Not sure why your comment got flagged as SPAM. Thanks for visiting.

    6. […] to use FCKEditor Posted on October 28, 2009 by Alex To continue with my mini JavaScript-text-editor kick, I moved on to […]

    7. I have a question. I might be in over my head, but I am very, very new to everything blogging. I have a wordpress blog. I unzipped the download of Tiny MCE but I really don’t know how to upload it to my blog, if that’s even possible. You lost me at Domino Server. Do I have a Domino server with a basic blog?

      What do I need in order to use Tiny MCE?

    8. Hmmm… You don’t use TinyMCE with WordPress. WordPress already has a pretty rich text editor as a part of your blog.
      My post was more about using TinyMCE in your own custom website development.

    9. Okay. Thanks.

    10. Thanks …many helpful

    11. Dear Sir. I m using init function of tiny mce in js header but its giving error “Illigal character”

    12. Please help..require asap

    13. now im getting error Indentifier expected. i have given script inside $$htmlhead but same problem. Under form html head also i have tried. My TinyMCE file is in html folder of domino. Means under c://programfile/ibm/lotus/domino……/html/tinymce

      how can specifi script name in html head content or $$htmlhead

    14. Girish,
      If you’re copying code from my page, just make sure to have copied everything and not omit or add any characters. JavaScript can be picky and freak if you’re missing a semicolon or something.
      I would just use the HTML Head and JS Header sections of the form. Don’t create special fields for that.
      Other than that, I’d have to see what you’re doing. If there’s a way for you to upload and share your nsf somewhere, I could take a peek.

    15. Best perfume women
      ..-)
      J lo luxe perfume
      Cloullyelurse David beckham perfume men

    16. Thanks for this series on rich text formatting, very useful!.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s

    %d bloggers like this: