Detailed introduction of H5 rich text editor

Use the H5 global attribute contenteditable to make DOM elements and their sub-elements editable

<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;
}

* Tested under Chrome 49 and valid

The following method makes the text content initially entered by the user be wrapped in the p element

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

The default rules are as follows

否则将直接作为#editor元素的文本节点，即<div  contenteditable id="editor" spellcheck="false">文本内容</div>同事点击Enter将新增div元素,即<div  contenteditable id="editor" spellcheck="false">文本内容<div></div></div>

View Code

#All elements used in editor are It can be deleted. When #editor is an empty element, the default rules will be applied when the user outputs content again. This state needs to be monitored here. When it occurs,

Enter it, and position the cursor to the end of the p element

Positioning cursor code

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

    range.selectAllChildren(element);
    range.collapseToEnd();
    
}

window.getSelection() IE9 already supports

The following situations may occur if positioning is not performed

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

The above is the detailed content of Detailed introduction of H5 rich text editor. For more information, please follow other related articles on the PHP Chinese website!