Description
Awebitor is the name of my WYSIWYG editor. I started working on it in 2006 because I was not satisfied by the available editors - each of them was rather buggy.
The current user interface and functionality is oriented towards simple users who know how to use office text processing applications like Microsoft Word. The purpose was to have a usable WYSIWYG editor for Agnezar (my CMS).
At the moment, there are more established WYSIWYG editors, more mature and polished. Nonetheless, the direction I want to take Awebitor is somewhat different from the others.
Inside Agnezar I use ReTidy to clean up the documents.
As usual, the editor design and icons were made by Marius.
Technical details
- Single JavaScript object which doesn't add any DOM noise.
-
Error recovery: if something goes wrong, the code will revert changes made to the document. It will leave the user
the possibility of editing the HTML in the initial
<textarea>. - No browser sniffing.
- Complete code separation between HTML, CSS and JS.
-
The interface markup is loaded using
XMLHttpRequestfrom a separate file. The CSS is also loaded from a separate file. The JS does nothing but interaction. - I tried to avoid any quirky "wait for the browser" behaviour. Under normal conditions there's only one timeout during load.
- It can use about:blank as the initial iframe, or a given URL for additional integration with the CMS.
- Supported Web browsers: Opera 9+, Firefox 1.5+, Safari 3+, Konqueror 4+ (which is a bit buggy). Internet Explorer is unsupported, but any browser can become supported once it implements the relevant Web technologies, because I don't use browser sniffing.
Future plans
- Converge towards a development path similar to the one used for Paint.Web: JSDoc comments, same coding style, same GUI library, etc.
- Adding keyboard shortcuts. Awebitor has no keyboard shortcuts for now.
- New GUI which would be more semantics-oriented, more dynamic and context-aware.
- Implement a tag attributes editor, and an CSS editor.
- Perhaps I will venture into editing other stuff, not just HTML.
Demo