First of all, don’t be too one-sided about any questions. Second, the cost of screenshot rumor making will be reduced again after reading this article. Finally, it is important to keep a rational and objective mind.

First, the effect drawing

The picture below is a screenshot taken on May 29, 2019. This is the effect of designMode, which is currently called contenteditable, user-modify.

Second, the isContentEditable

Before we get into the content, the isContentEditable property is a read-only property that indicates whether an HTML tag element is editable, true or false. Remember it. This is foreshadowing.

Third, designMode

Document. designMode controls whether the entire document is editable. Valid values are on and OFF. According to the specification, this property defaults to “off”. Firefox follows this standard. Earlier versions of Chrome and Internet Explorer default to “inherit”. Starting with Chrome 43, the default value is “off” and inherit is no longer supported. In Internet Explorer 6-10, this value is capitalized.

Source: the MDN

const mode = document.designMode;
document.designMode = "on"; // Document.designMode ="off"; // Not editableCopy the code

Very simple property, but with some flaws: Document-specific property If this property is applied to a document, all elements within the document, isContentEditable, will become true

Four, contenteditable

H5 new attribute support for all HTML tag elements,

<p contenteditable="true"></p>
<p contenteditable="false"></p>
Copy the code

IsContentEditable becomes true when the contenteditable property is changed to true

You might use it when making your own rich text editor. Since it is capable of self-made rich text editor, the property should be more powerful, so

contenteditable=""// The null value equals'true'
contenteditable="true"// Editable, supporting rich text editing contenteditable="false"// Uneditable contenteditable="plaintext-only"// Plain text editing contenteditable="events"// Support for the HTML element tag contenteditable="caret"// There is no support for emoticonsCopy the code

All of the above are its attribute values, for compatibility, null /true/false is supported in all browsers above IE8, plaintext-only is supported in Google Browser only. The rest are not installed.

Five, the user to modify

User-modify is a CSS property that theoretically applies to all elements,

user-modify: read-only; / / read only user - the modify:read-write; // Support rich text editing user-modify: write-only; // The user can modify the message but cannot see the content.read-write-plaintext-only; / / Read and write, only plain text is supportedCopy the code

Remember the isContentEditable property? Yes, all is false

Compatibility: Currently only Supported by Google, this means unified prefixes-webkit-

Six, summarized

PS:

  1. Of course, if it’s not for Chrome, it’s the only choicecontenteditable
  2. Why not?designModeWhat web pages will probably not be alloweddocumentEverything is editable