Shulou(Shulou.com)06/03 Report--

This article shares with you the content of an example analysis of the core ideas of editors in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The code and features are valid for testing under chrome49.

The essence of text rendering is the rendering of text nodes. The selected starting point and ending point can be obtained through the object Range built into the browser.

Var range = getRangeObject (); var start = range.startOffset,end = range.endOffset;var startContainer = range.startContainer;var endContainer = range.endContainer

The getRangeObjec code is as follows

Function getRangeObject () {if (window.getSelection) {var selection = window.getSelection (); if (selection.rangeCount > 0) {return selection.getRangeAt (0);}} else if (document.selection) {return document.selection.createRange ();} return null;}

The starting point is always on the left and the ending point is always on the right, which is not affected by the direction selected.

Only when the beginning of the starting point or the end of the ending point is, instead of a text node, you can use start,end to determine that the location of the br element is startContainer.childNodes [start], endContainer. ChildNodes [end-1]. What is returned is the text node start represents the start position of the cursor relative to the start text node, and the end represents the end position of the cursor relative to the end text node.

The algorithm to get the next text node is

Function getNextTextNode (startNode,dir = "nextSibling") {/ / record the state before the startNode change, and facilitate the rollback of the state when the startNode change is invalid let unchangeNode = startNode;if (startNode.nodeType = = 3) {startNode = startNode [dir];} while (true) {if (startNode = = undefined) {if (unchangeNode = = undefined) {/ / protection mechanism throw new Error ("the program will fall into an endless loop"); break } / * all the selected nodes of the parent element where startNode resides are traversed, pointing sartNode to the sibling node of the parent element * / let parent = unchangeNode.parentElement; unchangeNode = parent; startNode = parent [dir];} else if (startNode.nodeType = = 3) {/ / text node exits the loop break } else if (startNode.tagName = = "BR") {/ / handles single tags to avoid unnecessary iterations unchangeNode = startNode; startNode = startNode [dir];} else if (startNode.nodeType = = 1) {/ * enter * / unchangeNode = startNode;if (dir = "previousSibling") {startNode = $(startNode). Contents (). Last (). Get (0) } else if (dir = = "nextSibling") {startNode = $(startNode). Contents (). First (). Get (0);} else {/ / facilitate wrong positioning of throw new Error ("wrong traversal direction:" + dir);}} else {/ / facilitate erroneous positioning of throw new Error ("unexpected element type ="+ startNode)" }} return startNode;}

/ / the above functions replace recursion with external variables + while loops, and the added protection mechanism reduces misuse and poor experience caused by potential bug.

Get all text nodes between the start node and the end node

Function getTextNodes (startTextNode,endTextNode) {let textNodeArray = []; let node = startTextNode;while (true) {node = getNextTextNode (node); if (node = = endTextNode) {break;} textNodeArray.push (node);} return textNodeArray;} Thank you for reading! This is the end of this article on "sample analysis of the core ideas of editors in html5". 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 out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.