Using contentEditable for basic rich text input
With the new contentEditable
attribute in HTML5, we can turn every element into an editable rich text field. In theory, this could enable us to write complex rich text editors that would work right inside the browser.
Among other things, the new APIs can be used to send editing commands. This is done using the document.execCommand
function, which takes a command string as the first argument, and options as the third.
In practice, every browser vendor implements the interface slightly differently. However, most modern browsers are fully compliant.
You can test your browser's compliance at http://tifftiff.de/contenteditable/compliance_test.html; however, the test doesn't take into account the possibility that some browsers might act differently on the same command.
In this recipe, we're going to make a very simple contentEditable
field that supports few commands (paragraph style, undo/redo, bold/italic/underline, bullets, and numbered lists).