contenteditable: control elements can be edited the same as the rich text editor
<div contenteditable="true">
This text can be edited by the user.
</div>When an HTML element contenteditable attribute is set to true, "document.execCommand ()" method can be used. With this method, you can run related commands to manipulate the contents of the editable area.
It should be noted that different browsers have different handling of line breaks, but we can specify the default line-breaking behavior (Firefox inserted <br>, IE / Opera will use <p>, Chrome / Safari will use <div>):document.execCommand("defaultParagraphSeparator", false, "p");
General use contenteditable will use the following three methods:
document.createTextNode, document.createRange, window.getSelection
document.createTextNode
create a plain text node document.createTextNode (data: string), inherited from the Node interface.
document.createRange
create a the Range (interface represents a section of a portion of the document text node contains the node), wherein Range.getBoundingClientRect () / Element.getBoundingClientRect () This method is useful to add a new method (for obtaining page an element of the left, top, right and bottom, respectively, the relative position of the browser window).