Contenteditable and designMode

Activate Editor


There are two ways to activate the editor. The first method is to set the entire document to the design mode. The second method can be used in browsing mode to enable editing of each element at runtime. If you want to make the entire document editable during browsing, you can set it on the document body.
Contenteditable attribute.

Set the document to design mode


To set the entire document to the design mode, you can set the designMode for the document object itself.
Attribute. When the document is in design mode, no script is run. In this way, it seems that setting a button in the document to open or close the design mode is a good note, but this does not work. When the user opens it, it will remain in the design mode. When they click this button next time, it will be selected rather than clicked, and they will be able to edit its value by clicking it again. This is why it is best to pair the framework or
The reason why the document in IFRAME sets the designMode attribute. The following example shows how to enable the design mode for the document in IFRAME:


<Script for = "btndesign" event = "onclick">
Targetdoc
= Document.frames(0).doc ument;
If (targetdoc. designMode =
"On ")
Targetdoc. designMode = "off ";
Else

Targetdoc. designMode = "on ";
</SCRIPT>

<Button id = btndesign> designMode </button>
<IFRAME
Src = "blance.htm" style = "border: Black thin; width: 100%;
Height: 200px "> </iframe>

DesignMode
The attribute value is always stored in the upper-case format. in real time, it is initially set in the lower-case format. Remember this when testing its value. The default value of the designMode attribute is "inherit ".


Make the element editable in browsing mode (or not editable in design mode)

In Internet Explorer
5.5, You can activate the editor for each element, and the document itself is in browsing mode. Set the contenteditable attribute
True enables the element to be edited during browsing. The following example shows how to explicitly set this attribute and create a span with behaviors similar to the text box:

<Span
Contenteditable = true style = "width: 150; Border: lightgrey 3px
Inset "> </span>

It is easy to edit elements in all scripts. The following example shows how
Set the contenteditable attribute for the element whose ID is "foo:


Foo. contenteditable = true;

To prevent elements from being editable in design mode, you can set
The contenteditable attribute is set
False. But this will make the element layout, so that when it is in the design mode, the user will be able to control it selection, drag, adjust the size, and so on:


Foo. contenteditable = false;

Inheritance and nesting of contenteditable Elements


The contenteditable attribute is inherited. Therefore, if you describe that the element has a contenteditable
By default, all its child elements are editable. (The default value of the contenteditable attribute is "inherit ".


You can set the contenteditable attribute to false to enable the contenteditable
The child of the element cannot be edited, but remember that setting the contenteditable attribute of the element will lead to the element having its own layout. Regardless of the element's
The contenteditable attribute is set to true or
False. Remember that when a layout element is in an editable container, it is controlled and selected once you click it. When it is selected, the capture handle is displayed, and you can drag the element or adjust its size. This does not mean that you should not embed uneditable elements in editable elements, but pay attention to it.


Determine whether the element is editable.

To determine whether the element is editable, check only contenteditable
Attribute values are not enough. The element may not have contenteditable at all.
Attribute, but it may still have inherited the Editable content from an ancestor. Or, it may be an editable element by default, such as a text box. Alternatively, the document containing it may be in the design mode. The only completely reliable way to determine whether an element can be edited is to check
Iscontenteditable attribute. Iscontenteditable
Attributes combine all these factors. This attribute is read-only and the result is a Boolean value. The following example shows how to determine whether an element with the ID of "foo" can be edited:


Result = Foo. iscontenteditable;