ContentEditable, CTRL-B CTRL-I and save

Question

I just started using contentEditable and did not find much complete information about this.

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

Perhaps this will be the intended behavior in other browsers? This, for example, works in Chrome:

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

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

I am wondering if I can read this formatting to save user changes? Also, can I create a Bold button and an Italic button that will launch CTRL - B and CTRL - I ? Or will I need to depend on the user pressing CTRL - B and CTRL - I (which means giving them a note telling them)?

Answer 1

This is the standard in all major browsers. There are also software equivalents of keyboard shortcuts available through document.execCommand() in all major browsers. Bold and italic commands, for example, can be executed as follows:

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

However, markup is created between browsers. For example, options for bold include <b>foo</b> , <strong>foo</strong> and <span style="font-weight: bold">foo</span> .

Literature:

• MSDN Command List
• MDN (Mozilla)

Answer 2

The short answer is yes. You can find this article article . Many developers have taken this path. If you need a good wysiwyg editor, there are many options.

To your question: yes, you can read the formatting. Try innerHTML in the element and you will find <b> tags around your bold fonts and <i> around italics. Also - in the article I shared, you will learn how to create a button that will be highlighted in bold. Hope this helps!