Question

I’ve just started using a contentEditable, and have not found much comprehensive information on it.

I noticed that in Chrome, I can make words bold/italic by pressing CTRL–B and CTRL–I.

Is this possibly going to be the intended behavior in other browsers? This, for instance, works in Chrome:

<div class="container" id="typer" onclick="this.contentEditable='true';">

http://jsfiddle.net/uk6DA/15/

I’m wondering if I can read this formatting, in order to save the user’s edits? Also, can I create a Bold button and Italic button that will trigger CTRL–B and CTRL–I? Or would I need to depend on the user pressing CTRL–B and CTRL–I (which means providing them a note telling them)?

Answer 1

This is standard in all major browsers. There are also programmatic equivalents of the keyboard shortcuts available via document.execCommand() in all major browsers, although in 2022 this seems to be on the way out. For now, bold and italic commands, for example, can executed as follows:

document.execCommand("Bold", false, null);
document.execCommand("Italic", false, null);

However, the mark-up generated varies between browsers. For example, variations for bold include <b>foo</b>, <strong>foo</strong> and <span style="font-weight: bold">foo</span>.

References:

• MSDN, list of commands
• MDN (Mozilla)