Editable Documents on the Web
1 like929 views
The document discusses the evolution of web editing technologies, highlighting milestones from the first web browser to modern HTML5 features. It details the capabilities introduced over time, such as collaborative editing and the contenteditable attribute, along with associated research topics. The conclusion reflects on the historical support for rich text editing in browsers and the improvements HTML5 brings, suggesting a potential shift in how users interact with documents.
![The API calls
• element.contentEditable [= value]
• element.isContentEditable
14](https://image.slidesharecdn.com/editabledocumentsontheweb-presentation-130228033756-phpapp01/85/Editable-Documents-on-the-Web-14-320.jpg)
![The API calls
• document.designMode [= value]
18](https://image.slidesharecdn.com/editabledocumentsontheweb-presentation-130228033756-phpapp01/85/Editable-Documents-on-the-Web-18-320.jpg)
![The API calls
• document.execCommand( commandId [,... [,...]] )
• document.queryCommandEnabled( commandId )
• document.queryCommandIndeterm( commandId )
• document.queryCommandState( commandId )
• document.queryCommandSupported( commandId )
• document.queryCommandValue( commandId )
21](https://image.slidesharecdn.com/editabledocumentsontheweb-presentation-130228033756-phpapp01/85/Editable-Documents-on-the-Web-21-320.jpg)
Editable Documents on the Web
- 1. Editable Documents on the Web T-111.5502 Seminar on Media Technology B P (4-8 cr) Presentation Markku Laine, M.Sc. (Tech.) markku.laine@aalto.fi November 8, 2011
- 2. Presentation Outline • Evolution • Revolution(?): The HTML5 Approach • Research topics • Conclusion 2
- 3. Evolution 3
- 4. 1990: The WorldWideWeb (Nexus) Browser • The first Web browser • Direct manipulation of text on screen (WYSIWYG) • The user reading a Web page can edit and save that page • A true collaboration platform! Source: The World Wide Web Consortium (W3C) 4
- 5. 1993: The Mosaic Browser • The browser that popularized the Web • Regression: the user reading a Web page cannot anymore edit that page • The collaborative nature was lost! – Included support for annotations, though Source: Wikipedia 5
- 6. 2000: The Internet Explorer 5.5 Browser • The mainstream Web browser • The user reading a Web page can edit the entire page – document.designMode – element.contentEditable Source: Wikipedia 6
- 7. ????: JavaScript-Based WYSIWYG Editors • Can be embedded into any Web page • http://testbed.tml.hut.fi/tutorial/ htmleditors.xformsdb Source: XFormsDB 7
- 9. Google's "Hype Cycle" for HTML5 1st WHATWG draft 1st W3C draft Source: Google Insights for Search 9
- 10. Features Related to Editing Documents • The contentEditable attribute • The designMode property • Editing APIs • WYSIWYG editing for Web pages – Certain elements can be restricted from being edited • Implemented in all major browsers 10
- 11. Demo 11
- 12. <div contenteditable="true"> 12
- 13. HTML Element's contenteditable Attribute • Governs just the element on which it appears, and that element's children – That is, makes those elements editable • Enables Web developers to build element-level rich text editors • W3C Working Draft – http://www.w3.org/TR/html5/editing.html#contenteditable 13
- 14. The API calls • element.contentEditable [= value] • element.isContentEditable 14
- 15. Actions within Editing Hosts • Move the caret • Change the selection • Insert text • Break block • Insert a line separator • Delete • Insert, and wrap text in, semantic elements • Select and move non-editable elements nested inside editing hosts • Edit form controls nested inside editing hosts 15
- 16. document.designMode="on" 16
- 17. Document Object's designMode Property • Governs the entire document – That is, makes the entire document editable • Enables Web developers to build document-level rich text editors • W3C Working Draft – http://www.w3.org/TR/html5/editing.html#designMode 17
- 18. The API calls • document.designMode [= value] 18
- 19. Editing APIs 19
- 20. Document Object's Editing APIs • A set of API calls to issue commands (e.g., bold and italic) on the editable region−that is, a document or an element), and to query the current state of the region • W3C Working Draft – http://www.w3.org/TR/html5/dnd.html#editing-apis 20
- 21. The API calls • document.execCommand( commandId [,... [,...]] ) • document.queryCommandEnabled( commandId ) • document.queryCommandIndeterm( commandId ) • document.queryCommandState( commandId ) • document.queryCommandSupported( commandId ) • document.queryCommandValue( commandId ) 21
- 22. Possible values for commandId (specified by W3C) • bold, italic, subscript, superscript • createLink, unlink, formatBlock • delete, forwardDelete • insertImage, insertHTML, insertLineBreak, insertOrderedList, insertUnorderedList, insertParagraph, insertText • redo, undo, selectAll, unselect • vendorID-customCommandID • Anything else do nothing 22
- 23. ExecCommand Demo http://www.quirksmode.org/dom/execCommand/ 23
- 24. Implementation Status Source: http://caniuse.com/ 24
- 25. Research Topics 25
- 26. Research Topics • Code debugging game called Gidget (Lee and Ko, 2011) • Collaborative, lightweight in-line editing (Rees, 2000) • Web as an application platform (Taivalsaari and Mikkonen, 2011 & Anttonen et al., 2011) • Collaborative and interactive document editing (Fujimoto and Matsuo, 2006) 26
- 27. Conclusion 27
- 28. Conclusion • Support for in browser rich text editing has come and gone during the history of the Web • HTML5 provides improvements related to editing documents in browsers – Some compatibility problems between different browsers • Typically used together with other HTML5 features, such as client-side databases as well as drag-and-drop • "This document cannot be edited" Will this change the way we interact with documents permanently? 28
- 29. References • Rees, M.J. "User Interfaces for Lightweight In-Line Editing of Web Pages". In AUIC, 2000. • Taivalsaari, A. and Mikkonen, T. "The Web as an Application Platform: The Saga Continues". In SEAA, 2011. • Lee, M.J. and Ko, A.J. "Personifying Programming Tool Feedback Improves Novice Programmers' Learning". In ICER, 2011. • Anttonen, M. et al. "Transforming the Web into a Real Application Platform: New Technologies, Emerging Trends and Missing Pieces". In SAC'11, 2011. 29
- 30. Thank You! Questions? Comments? markku.laine@aalto.fi 30