Initialization of H5 Rich Text Editor the DOM-geographic tornado used for editing,

Initialization of H5 Rich Text Editor the DOM-geographic tornado used for editing,

Use the global attribute contenteditable of H5 to edit DOM elements and their child elements.

<div  contenteditable id="editor">   </div>

Style code

html,body {  overflow: hidden;  width: 100%;  height: 100%;}* {  margin: 0;  padding: 0;}#editor {  width: 100%;  height: 100%;  outline: none;  padding-left: 15px;}

View Code

 

* The test is effective in chrome 49.

The following method causes the text content entered by the user to be included in the p element package

<div  contenteditable id="editor" spellcheck="false">    <p><br/></p></div>

The default rules are as follows:

Otherwise, it will be directly used as the text node of the # editor element, that is, the <div contenteditable id = "editor" spellcheck = "false"> text content </div> colleague clicks Enter to add the div element, that is, <div contenteditable id = "editor" spellcheck = "false"> text content <div> </div>

View Code

# All the elements used in the editor can be deleted. When the # editor is empty, the default rule will be applied to the output content again. You need to listen to this status here, <p> <br/> </p> is added when the cursor is located at the end of the p element.

Locating cursor code

function cursorToEnd(element){        element.focus();    var range = window.getSelection();    range.selectAllChildren(element);    range.collapseToEnd();    }

View Code

Window. getSelection () IE9 is supported

It is not possible to locate the following situations

<div  contenteditable id="editor" spellcheck="false">    111111    <p><br/></p></div>

View Code