Example Analysis of Html5 Rich text Editor

This article shares with you the content of a sample analysis of a Html5 rich text editor. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use the global attribute contenteditable of H5 to make the DOM element and its child elements editable

Style code

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

* valid test under chrome 49

The following ways make the text content initially entered by the user under the package of the p element

The default rules are as follows

Otherwise, it will be directly used as the text node of the # editor element, that is, the text content colleague will click Enter to add the div element, that is, the text content

View Code

All the elements used in # editor can be deleted. When # editor is an empty element, the default rule will be applied when the user outputs the content again. Here, to listen for this state, when it occurs, the

Add it and position the cursor to the end of the p element

Locate the cursor code

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

Window.getSelection () IE9 already supports

If you do not locate, the following may occur

111111

Thank you for reading! This is the end of the article on "sample Analysis of Html5 Rich text Editor". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!