1 / 34

Integrating “WYSIWYG” web editors into Notes/Domino applications

Integrating “WYSIWYG” web editors into Notes/Domino applications. How to do it, and how to do it better. Introduction: Ben Langhinrichs. President - Genii Software Ltd. Founded in 1992 (OS/2 utilities) First Notes product in 1995 IBM/Lotus Business Partner since 1995

kiora
Download Presentation

Integrating “WYSIWYG” web editors into Notes/Domino applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Integrating “WYSIWYG” web editorsinto Notes/Domino applications How to do it, and how to do it better

  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 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. 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 • Create doclinks, link hotspots and URL hotspots • Change colors, fonts and attributes • Styles through style picker • Limited CSS control added in ND6

  5. 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

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

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

  8. 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

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

  10. 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, likely to be a contender soon • Many, many others with niche markets or specialties • http://www.GeniiSoft.com/showcase.nsf/WebEditors

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

  12. FCKeditor • Made in Germany • Allows either div or textarea replacement • Full functionality • Customizable toolbar • Open source JavaScript - can be modified • 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/EC2007_1 and is available at no cost under the standard GNU Lesser General Public License.

  13. Configurable Toolbar /* Added specialized toolbar appropriate for Lotusphere demo. */FCKConfig.ToolbarSets[“CoexEditDefault"] = [ ['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']] ;

  14. 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

  15. 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 few limits • Images, links, etc. will work

  16. 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

  17. Code Peek

  18. Special Features - Images • Add web based images • Add smileys and other emoticons • Add local images (Genii customization) • Resize images or set attributes

  19. 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

  20. Special Features - Doclinks • Custom code to create doclinks (Genii customization) • Custom view to select doclink • Easy to extend to other dbs • Alt text may be set on doclink to identify further

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

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

  23. 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

  24. Demo: FCKeditor with Domino

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

  26. Demo: FCKeditor with Domino

  27. Modifying 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

  28. Demo: FCKeditor with Discussion db

  29. Code Peek

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

  31. Demo: CoexEdit

  32. Code Peek

  33. More information • http://GeniiSoft.com/showcase.nsf/EC2007_1 - 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?

More Related