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
• _at_Midas Formulas

4
Other Sessions

• SpeedGeeking
• Geeks have Layers, Too (Five uses for layers in
  Notes in five minutes)
• 545pm 700pm Yacht Beach Grand Ballroom
  South
• First come, first (and only) served
• GURUpalooza
• Ask the BP Speakers anything you like
• 1130am-1230pm 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

• lttextareagt replacement
• Java applet
• JavaScript ltdivgt 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/WebEdito
  rs 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"Lotusph
  ereDefault" 'Source','-', 'Cut','Copy','
  Paste','PasteText','PasteWord','-','Print','SpellC
  heck', 'Undo','Redo','-','Find','Replace','-',
  'Bold','Italic','Underline','StrikeThrough','-'
  ,'Subscript','Superscript', 'OrderedList','Unor
  deredList','-','Outdent','Indent', 'JustifyLeft'
  ,'JustifyCenter','JustifyRight','JustifyFull',
  'Link','Unlink','Anchor','TextColor', 'Image',
  'File','Doclink','Table','Rule','Smiley','SpecialC
  har','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 IBMs way of editing
  rich text
• Doesnt 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
QA Are we done yet?