A more technical note on Blogger's implementation of WYSIWYG editing in the browser.What's this all about then?
I just wanted to provide a brief overview on implementing WYSIWYG editing within Blogger that describes some of the techniques and technologies required for its implementation and the address the impact of the design on web standards education.
WYSIWYG: An acronym that stands for What - You - See - Is - What - You - Get. A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed. WYSIWYG applications are especially popular for publishing.A little background.
In an ongoing effort to lower the barrier to entry for self-publishing we've investigated features that can reduce the HTML knowledge required to post to a weblog. We've also been investigating ways to introduce greater stylistic control over post content to users. Additionally, there have been several efforts by competitors in our business domain (sometimes via third-party plug-ins) to introduce text-styling controls. So, there was a quite a bit of interest on our part in developing something.
Why the WYSIWYG?
We'd like our users to be able to express themselves more accurately in the text they're writing, including text styling. And since two of the major browser vendors supply native formatting tools that can be extended it seemed that we should offer some solution. I go into further detail in my earlier note on the usefulness of WYSIWYG editing in the browser.
MSHTML and Midas.
With the release of Internet Explorer 5.5, (is that correct? asking the web to help fact check -cw) Microsoft exposed a WYSIWYG HTML editing feature set with ongoing support which includes the following:
- Standard editing functionality such as caret positioning, keyboard navigation,
- drag-and-drop, and content selection.
- Copy, cut, delete, and paste operations.
- Multi-level undo and redo.
- The ability to toggle selected text between bold, italic, and/or underlined.
- The ability to alter typeface, font size, forecolor (text), and backcolor (background).
- The ability to remove formatting.
- The ability to increase or decrease indentation.
- The ability to justify text (left, center, right).
- The ability to create ordered and unordered lists.
- The ability to create a hyperlink or bookmark.
- The ability to insert a horizontal line.
- The ability to insert an image.
An important vendor note is that the next version of Safari will support a WYSIWYG library and, as far as I know, Opera currently has no support for rich-text editing nor published plans to generate any native effort in that regard.
Learning The Wrong Thing. Standards education. Removing the FONT tag.
Blogger has many, many users and the adoption rate is continually increasing. This created a bit of pressure on me as I worried that use of the native WYSIWYG support for each browser could help to slow movement away from the use of deprecated HTML, particularly as Internet Explorer will not see any significant upgrade for years. I felt there was an opportunity to provide some education regarding well-formed markup for users who were interested in looking beneath the hood by entering an "edit source" mode and would see markup they would assume was the-way-to-do-things.
Both Midas and MSHTML return the <font> tag, when applying styles. Midas, it seems, only returns a <font> tag when adjusting certain font sizes. MSHTML generated markup is particularly hard to resolve within standards-compliant sites as it returns markup like "<FONT size=5>foo</FONT>". So, to make things generally well-formed is a bit tricky. I could have avoided using execCommand (other solutions have done this) but since we have a general need for a client-side method to alter content containing deprecated tags, I instead made a series of regular expressions that transform FONT tags into SPAN tags.
Each version a derived class.
There are times when a WYSIWYG solution isn't appropriate, but at the times a need is presented, it would be nice to avoid re-creating the infrastructure for the basic widget functionality. The Blogger implementation is a sub-class of a RichEditor() object. The API is at an early stage and much more work needs to be done to reduce the footprint and improve re-use, but it'll allow us to separate specific implementation concerns from general WYSIWYG concerns.
Floating toolbar widgets.
Because Blogger's implementation may need to adapt to a variety of posting enviroments, I drafted the toolbar so that it relies on <span> elements whose positioning and style are largely determined by CSS.
The paste experiment.
Both Midas and MSHTML allow for users to paste arbitrary HTML from whatever previous system selection was captured. This is great. But for many this generated a series of problems. The common case of copying data from another website and pasting into the editor in order to comment on that content proved challenging as extra-content HTML was often included in the selection. It was often difficult to remove (especially if it included ads) and could generate run-time errors.
I've taken my cue from other editors and attempt to leave hyperlinks and line breaks but strip all the rest of the HTML in the copied selection. For now, this stripping mechanism only occurs in IE for a couple of reasons. 1.) I'd like to improve on the various workarounds for cross-browser onpaste/onbeforepaste I've seen in web development, if I can. 2.) I suspect that many users of Gecko-based browsers can do a better job of recovering from non-intuitive layout puzzles. :)
Humor. *snort* Yes, I'm looking into that as well.
- The browsers could drop (or limit) support for their WYSIWYG features in the future.
- Trying to handle the vagaries of the varied HTML expressions of internet content creators is somewhat like eating soup with a fork. There will be an early scramble to define a series of expressions that will match a set that a majority of users will find useful.