(^472) ❘ CHAPTER 22 CREATING A SIMPLE WYSIWYG EDITOR
FIGURE 22-2
You added a <div> element for the toolbar and updated the CSS to account for positioning this
toolbar. On the toolbar, you included three <button> elements for the bold, italic, and underline fea-
tures, respectively, along with two <select> elements for the font name and size features. Note the
data-format attribute added to these elements.<button class='toolbar-btn bold' data-format='bold'>B</button>This construction uses the $.data() feature of jQuery, which provides access to the dataset property
mapping of the HTML5 data, attributes for use without requesting attribute values individually.
The toolbar button click event handler starts with some sanity checks:var data = this && $(this).data && $(this).data();This line of code uses the JavaScript shortcut of combining logical checks and assignment. The vari-
able data is assigned when this (the clicked button) exists and its wrapped jQuery object $(this)
contains a data member. Unlike other programming languages, the value assigned is not the boolean
(true or false) result of the conditional expression on the right side of the = assignment operator, but
rather the result of the rightmost argument: $(this).data().if (data && data.format && document.execCommand)