HTML5 enables editing of a page element or the entire page

1, to set the Contenteditable property of any element to true, click to edit the content of the element

<div id= "Editablediv" style= "Width:240px;height:100px;background-color: #FEFFCE"
Contenteditable= "true" >
You can edit this text
</div>

2, you can also use JS to dynamically turn on and off the editing function

<script>
Allow elements to be edited
function StartEdit () {
var element = document.getElementById ("Editablediv");
Element.contenteditable = true;
}

To restore an element to its normal state
function Stopedit () {
var element = document.getElementById ("Editablediv");
Element.contenteditable = false;
Display the edited content
Alert ("Current content is:" + element.innerhtml);
}
</script>
<div id= "Editablediv" style= "Width:240px;height:100px;background-color: #FEFFCE" >
You can edit this text
</div>
<button onclick= "StartEdit ()" > Start editing </button>
<button onclick= "Stopedit ()" > Stop editing </button>

3, edit the entire page using DesignMode

If you make the entire page editable, the button events on the page will also fail. So you usually put the document you want to edit in a <iframe> element, and that element acts as a super edit box.

The example below is a click on "Start" to edit the Web page contained in the IFRAME. Click "Stop", the page in the IFRAME exit design mode to become not editable, while the following Div display page edited HTML code.

(Note: The page that the IFRAME loads must be editable under the same field)

<script>
Let the IFRAME switch to design mode
function StartEdit () {
var editor = document.getElementById ("Pageeditor");
Editor.contentWindow.document.designMode = "on";
}

Allow IFRAME design mode to close
function Stopedit () {
var editor = document.getElementById ("Pageeditor");
Editor.contentWindow.document.designMode = "Off";
Display encoded HTML code
var editedhtml = document.getElementById ("editedhtml");
Editedhtml.textcontent = Editor.contentWindow.document.body.innerHTML;
}
</script>
<iframe id= "Pageeditor" src= "/index.html" style= "width:500px;height:150px" ></iframe>
<button onclick= "StartEdit ()" > Start editing </button>
<button onclick= "Stopedit ()" > Stop editing </button>
<div id= "editedhtml" style= "Width:500px;height:150px;background-color: #FEFFCE" ></div>