BP203 Integrating WYSIWYG Web Editors with IBM Lotus Domino

1. BP203 Integrating WYSIWYG Web Editors with IBM Lotus Domino Editing rich text fields on the web without tearing your hair out.

2. Introduction: Ben Langhinrichs • President - Genii Software Ltd. • Founded in 1992 (OS/2 utilities) • First Notes product in 1995 • IBM/Lotus Business Partner since 1995 • Based in Cleveland, Ohio, U.S.A. • Customers in over 46 countries • Member - The Penumbra Group

3. Genii Software – Current Products Coexistence Solutions • CoexEdit: Notes/Web editing coexistence • CoexLinks: Notes/Outlook e-mail coexistence Rich Text Tools • Midas Rich Text LSX • Midas Rich Text C++ API • @Midas Formulas

4. Other Sessions • SpeedGeeking • Geeks have Layers, Too (Five uses for layers in Notes in five minutes) • 5:45pm – 7:00pm Yacht & Beach Grand Ballroom South • First come, first (and only) served • GURUpalooza • Ask the BP Speakers anything you like • 11:30am-12:30pm Swan 5-10

5. Editing rich text in Notes client • Add “richness” with menu items, properties and keyboard shortcuts • Easily insert tables, images and file attachments • In-line file attachments are powerful feature, little used elsewhere • In-line images are often more convenient than referenced (URL) images • Create doclinks, link hotspots and URL hotspots • Change colors, fonts and attributes • Styles through style picker • Limited CSS control added in ND6

6. Editing rich text in Web (with Domino) • Option 1 – “Using HTML” • Simple textarea • All formatting, images, tables, links, etc. lost • No ability to add formatting • End result is rich text, but very plain rich text

7. Editing rich text in Web (with Domino) • Option 2 – “Using Java applet” • Java applet fairly heavy and slow • Some fidelity remains, but images, file attachments and doclinks lost • Tables are displayed as tags, very hard to manage • Basic formatting works • No import of images, file attachments or doclinks

8. Editing rich text in Web (with Domino) • Option 3 – “Using Best Fit for OS” • Requires Internet Explorer on Windows • Pretty good fidelity, but images, file attachments and doclinks still lost • Tables are displayed well, but messed up on save • Basic formatting works, plus some advanced formatting • No import of images, file attachments or doclinks

9. WYSIWYG Editors • What You See Is What You Get • HTML/XHTML underneath, rich text on surface • More editors being built using XML as well • Enhanced editing capabilities in browsers • Most are JavaScript based, a few are Java applet based

10. The Editable Area - Choices • <textarea> replacement • Java applet • JavaScript <div> approach

11. Open Source Editors • FCKeditor – Probably the top contender now • TinyMCE – Lightweight alternative • htmlarea – now unsupported, was very popular • Xinha – successor to htmlarea • Dojo editor – Fairly limited, but likely to be a contender soon • Many, many others with niche markets or specialties • See http://www.GeniiSoft.com/showcase.nsf/WebEditors for list

12. Commercial Editors • eWebEditPro • editOn Pro • EditLive! for Java • More every day

13. FCKeditor • Allows either div or textarea replacement • Full functionality • Customizable toolbar • Open source JavaScript - can be modified • In this presentation, a customized version of FCKeditor created by Genii Software is used for all samples. The customized version is available from http://www.GeniiSoft.com/showcase.nsf/BP203 and is available at no cost under the standard GNU Lesser General Public License (see http://www.gnu.org/licenses/lgpl.html)

14. Configurable Toolbar • /* Added specialized toolbar appropriate for Lotusphere demo. */FCKConfig.ToolbarSets["LotusphereDefault"] = [ ['Source','-'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-'], ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'],['TextColor'], ['Image','File','Doclink','Table','Rule','Smiley','SpecialChar','UniversalKey'], '/', ['Style','FontFormat','FontName','FontSize']] ;

15. FCKeditor – Create approach • Create a div around rich text field • Use innerHTML property to feed to FCKeditor • 64KB limit on content • Uses “Create” method in FCKeditor • Looks the same as textarea replacement, but less flexible • Allows creation/manipulation of your own content programmatically

16. FCKeditor – Textarea Replacement • Make sure the id is set to fieldname • Uses the HTML from field itself • HTML must be set to passthru to display properly • Uses “ReplaceTextarea” method • Very flexible with a few limits • Images, links, etc. will work • Closest to having a “rich text field”

17. FCKeditor – Adding to database • Load FCKeditor JavaScript in HTML header • Set id for rich text field • Modify onLoad logic to trigger • Specify the toolbar • Add WQS agent to reset passthru HTML at end

18. Code Peek

19. Special Features - Images • Add web based images • Add smileys and other emoticons • Add local images (Genii customization, but freely available) • Resize images or set attributes

20. Special considerations - Images • Local images are actually stored in separate documents • Local images may be less secure • Deleting image does not delete separate document • Replicated databases require FCKeditor even for viewing • Replica copies require identical filepath

21. Special Features - Doclinks • Custom code to create doclinks (Genii customization, but freely available) • Custom view to select doclink • Easy to extend to other databases • Alt text may be set on doclink to identify further

22. Special considerations - Doclinks • No special properties box for doclinks (just an image with link) • Replica copies require identical filepath

23. Special Feature – File Attachments • Files can be uploaded without upload controls on form (Genii customization, but freely available) • Files can be uploaded without submit • Several files can be uploaded where you like

24. Special considerations – File Attachments • No special properties box for attachments • Paperclip image and link text can be separated • Local “attachments” are actually stored in separate documents • Local attachments may be less secure • Deleting attachment does not delete separate document • Replica copies require identical filepath

25. Demo: FCKeditor with Domino (Sample db)

26. Multiple rich text fields • Work primarily the same as single • May require smaller toolbars • Require modification of WQS agent

27. Demo: FCKeditor with Domino (Sample db)

28. Code Peek

29. Using FCKeditor in the IBM Discussion template • Requires changes to remove IBM’s way of editing rich text • Doesn’t handle images and attachments the same way • Better integration possible with significant effort • Modified template available on our website

30. Demo: FCKeditor with IBM Discussion template

31. Code Peek

32. So, what is missing with this integration? • Ability to edit from Notes as well • Images and attachments in source document • Agent to clean up deleted images and attachments

33. More information • http://GeniiSoft.com/showcase.nsf/BP203_LS2007 - Download all samples, customized FCKeditor, templates, etc. from this session and see additional information on WYSIWYG integration with IBM Lotus Notes/Domino • http://GeniiSoft.com – CoexEdit, CoexLinks and Midas Rich Text products • http://GeniiSoft.com/showcase.nsf/GeniiBlog – Tips, tricks (and Mike Midas too) • http://www.fckeditor.net - Original version of FCKeditor, forums, etc.

34. Q&A: Are we done yet?