(^468) ❘ CHAPTER 22 CREATING A SIMPLE WYSIWYG EDITOR
Start with an HTML example of the attribute (Example 22-1.html):
<!DOCTYPE HTML>
content='application/xhtml+xml; charset=utf-8' />
Add the following CSS for presentation (Example 22-1.css):
body {
font: 12px Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
div#container {
position: absolute;
top: 10%;
left: 10%;
height: 80%;
width: 80%;
padding: 5px;
border: 1px solid black;
border-radius: 3px;
}
That completes the code for the example. Although you can use JavaScript to dynamically toggle
whether an element is editable, you don’t need any JavaScript for the simplest example of the con-
tenteditable attribute. You simply add the attribute to a
element.
The CSS sets some default styles for the and then positions the editable element in the center
of the page with a thin, rounded (in most browsers) border and a little padding to keep the text off
the border.
The preceding code results in the document shown in Figure 22-1.
[http://www.it-ebooks.info](http://www.it-ebooks.info)
The CSS sets some default styles for the and then positions the editable element in the center
of the page with a thin, rounded (in most browsers) border and a little padding to keep the text off
the border.
The preceding code results in the document shown in Figure 22-1.
[http://www.it-ebooks.info](http://www.it-ebooks.info)