MotivationEditing text is a basic function in any web application. While editing plain text in INPUT or TEXTAREA elements is easy and functional, web browsers are not so good at editing rich (styled) text. The problem is especially bad when the application requires more than simple styled text, for example restricted 'semantic' editing or advanced usage with non-editable sections. While designMode and contentEditable have promise, the implementations are buggy and lack the features required to build applications on par with desktop software: - Bad markup, including inline styles and non-tree DOM trees (thanks IE!)
- Limited scope, suitable for WYSIWYG editors only
- Each browser behaves differently, requiring browser specific hacks which change from version to version
- Selection problems; interacting with other elements on the page clears the selection. Using IFRAMEs to avoid this causes other problems
- Nasty API (execCommand()) which gives no visibility into the state of the editor
State of the artVarious rich text editing tools exist, such as TinyMCE, FCKeditor and WYMeditor, each with their own focus. However, - These are all heavyweight solutions
- Focus on WYSIWYG editing
- Limited scope for extensions
- Limited browser support, and certainly not future proof
- UI is pretty much fixed, determined largely by the underlying API
OptionsThere are few options open to producing better editors - Plugins
- Flash
- Runtimes like AIR, Silverlight
- Fixing the web browsers
All of these have their pros and cons, but all have the fatal flaw of requiring new software to be installed on the users' computers. However, web browsers are all good at manipulating the DOM with javascript. A proof-of-concept has been written which demonstrates that this technique is practical. ProposalA framework for building editors: - Not rely on any javascript library (eg jQuery or Prototype)
- Provide the basic editing services, essentially just the ability to edit text
- Just use DOM manipulation to edit the text
- Be compatible with 'all' browsers, old, new and future
- Have an API which is expressive and allows examination of the editor state (eg get the selection)
- Uses callbacks for as much of the behaviour as possible
Using this framework, editors can be built which meet the needs of each application. The project will provide basic WYSIWYG and semantic editors.
|
Sign in to add a comment
