Windows® 8.1 Apps with HTML5 and JavaScript Unleashed

Creating a Rich Text Editor

If you want to create a form field that accepts rich text—such as bold, italic, or underlined text—then you can use the contenteditable attribute. Imagine, for example, that you want to enable a user to enter a college admissions essay. In that case, you can use the following HTML form:

Click here to view code image

<form>    <label for="inpEssay">        College Admissions Essay:    </label>    <div id="inpEssay" contenteditable="true" class="win-textarea richtext"></div>    <br />    <input type="submit" /></form>

In the form, the contenteditable attribute is applied to a DIV element with the ID inpEssay. The contenteditable attribute makes the content of the DIV element editable (see Figure 5.16).

FIGURE 5.16 ...