BP 203 Integrating WYSIWYG Web Editors with IBM

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

Introduction: Ben Langhinrichs § President - Genii Software Ltd. 4 4 4 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

Genii Software – Current Products Coexistence Solutions § Coex. Edit: Notes/Web editing coexistence § Coex. Links: Notes/Outlook e-mail coexistence Rich Text Tools § Midas Rich Text LSX § Midas Rich Text C++ API § @Midas Formulas

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

Editing rich text in Notes client § Add “richness” with menu items, properties and keyboard shortcuts § Easily insert tables, images and file attachments 4 In-line file attachments are powerful feature, little used elsewhere 4 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 ND 6

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

Editing rich text in Web (with Domino) § Option 2 – “Using Java applet” 4 4 4 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

Editing rich text in Web (with Domino) § Option 3 – “Using Best Fit for OS” 4 4 4 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

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 Java. Script based, a few are Java applet based

The Editable Area - Choices § <textarea> replacement § Java applet § Java. Script <div> approach

Open Source Editors § FCKeditor – Probably the top contender now § Tiny. MCE – 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. Genii. Soft. com/showcase. nsf/Web. Editors for list

Commercial Editors § e. Web. Edit. Pro § edit. On Pro § Edit. Live! for Java § More every day

FCKeditor § Allows either div or textarea replacement § Full functionality § Customizable toolbar § Open source Java. Script - 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. Genii. Soft. com/showcase. nsf/BP 203 and is available at no cost under the standard GNU Lesser General Public License (see http: //www. gnu. org/licenses/lgpl. html)

Configurable Toolbar § /* Added specialized toolbar appropriate for Lotusphere demo. */ FCKConfig. Toolbar. Sets["Lotusphere. Default"] = [ ['Source', '-'], ['Cut', 'Copy', 'Paste. Text', 'Paste. Word', '-', 'Print', 'Spell. Check'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-'], ['Bold', 'Italic', 'Underline', 'Strike. Through', '-', 'Subscript', 'Superscript'], ['Ordered. List', 'Unordered. List', '-', 'Outdent', 'Indent'], ['Justify. Left', 'Justify. Center', 'Justify. Right', 'Justify. Full'], ['Link', 'Unlink', 'Anchor'], ['Text. Color'], ['Image', 'File', 'Doclink', 'Table', 'Rule', 'Smiley', 'Special. Char', 'Universal. Key'], '/', ['Style', 'Font. Format', 'Font. Name', 'Font. Size'] ];

FCKeditor – Create approach § Create a div around rich text field § Use inner. HTML property to feed to FCKeditor § 64 KB 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

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 “Replace. Textarea” method § Very flexible with a few limits § Images, links, etc. will work § Closest to having a “rich text field”

FCKeditor – Adding to database § Load FCKeditor Java. Script in HTML header § Set id for rich text field § Modify on. Load logic to trigger § Specify the toolbar § Add WQS agent to reset passthru HTML at end

Code Peek

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

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

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

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

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

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

Demo: FCKeditor with Domino (Sample db)

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

Demo: FCKeditor with Domino (Sample db)

Code Peek

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

Demo: FCKeditor with IBM Discussion template

Code Peek

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

More information § http: //Genii. Soft. com/showcase. nsf/BP 203_LS 2007 - Download all samples, customized FCKeditor, templates, etc. from this session and see additional information on WYSIWYG integration with IBM Lotus Notes/Domino § http: //Genii. Soft. com – Coex. Edit, Coex. Links and Midas Rich Text products § http: //Genii. Soft. com/showcase. nsf/Genii. Blog – Tips, tricks (and Mike Midas too) § http: //www. fckeditor. net - Original version of FCKeditor, forums, etc.

Q&A: Are we done yet?