Many web applications allow users not just to edit plain text, but also to embellish it – making it bold or underlined, adding bulleted lists or images. For example, think of online document or blog editors, or rich e-mail apps. JavaScript provides various APIs you can use to implement these apps.
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
, can be marked as editable by adding the
contenteditable attribute:
...some content...
You can then manipulate the content with simple calls:
document.execCommand("formatting command", showUI, parameter)
For example, you can set the color of the selected text to red with this call:
document.execCommand("forecolor", false, "red")
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.
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.
