This post is by Roland Steiner of the Chrome Team. Roland works mainly on layout and rendering for Chrome and WebKit. An Austrian native, Roland has ventured far and made Tokyo his second home. -scottk
Unfortunately, while these APIs are largely defined the same in modern browsers, the results often differ. To document the current state of all this, we have set up a new rich text editing test suite as part of the larger browserscope framework.
Let’s look at how a region of text, such as a
<div>, can be marked as editable by adding the
You can then manipulate the content with simple calls:
<div contenteditable="true"> ...some content... </div>
For example, you can set the color of the selected text to red with this call:
document.execCommand("formatting command", showUI, parameter)
Although this command works well on most browsers, different browsers implement different subsets of formatting commands, and even common commands often produce varying HTML structures.
document.execCommand("forecolor", false, "red")
There are other APIs that affect selection and cursor movement, or allow querying of the current state, and those, too, are often implemented differently.
Our new test suite tries to capture all currently implemented commands and APIs, and runs them on varying initial HTML content and within various containers. The suite already contains well over 1,000 tests.
We don’t want to stop there. We intend to grow the suite and incorporate external feedback and suggestions so we can arrive at a common set of editing functions. We hope this can then serve as a common reference, not only for browser implementers, but also for web developers.
To achieve this goal, we would like input from anyone interested in this topic, including those with past complaints about bugs and incompatibilities in this area.
For suggestions, criticism, and general discussion on the suite and tests, please send feedback to the browserscope mailing list at email@example.com.