CODEWITHSUNDEEP
htmlcontenteditable
Stefan
Stefan

Reputation: 14863

HTML5 ContentEditable: Where do this resize boxes come from in IE

I'm playing around with the html5 contentEditable="true" feature. The best example therefor is here HTML5 Demo: ContentEditable. Now this features works best in IE 9.0 (shocking, something works best in IE ;)), and there it displayes this cool resize boxes over all HTML elements (which is quite funny because now you can't click the button or any link^^ (well talk about wokring best...)).

I copied the demo and boiled it down to the content ediable part, but I can't find how they make this resize boxes for the elements. What am I missing?

Here is my code simple html: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>HTML5 Demo: ContentEditable</title>
    </head>
    <body>
        <section contenteditable="true">
            <h2>Go ahead, edit away!</h2>
            <p>
                Here's a typical paragraph element
            </p>
            <ol>
                <li>
                    and now a list
                </li>
            </ol>
        </section>
    </body>
</html>

Source: HTML5 Demo: ContentEditable

Upvotes: 1

Views: 1300

Answers (1)

Tim Down
Tim Down

Reputation: 324587

Mozilla also has similar resize handles for tables and images. WebKit and Opera have no built-in resizing UI for editable content. IE goes further and also provides resize handles for all elements that have layout. IE also has a different type of selection object to deal with editable elements being in this mode.

Upvotes: 1

Related Questions