In the editor, in addition to dealing with the DOM tree, the second thing is to control our range. After we click the left mouse button in the editing area, the range will flicker, and there is the editing position, including the selection of a range by sliding the mouse after pressing the left button. The range information will indicate the position of the DOM node that the current user wants to operate.
After knowing the position of the DOM to be manipulated, any other user operations may need to change the DOM tree structure, such as inputting characters or pressing the delete key. What we need to do is to correctly apply the user feedback to the DOM tree. After up, let the range range fall on the correct position, the user does not want to see the range jump randomly.
The browser has provided us with a rich API Range. Different browser vendors may have some subtle differences in implementation, including differences in the location of selected nodes. But these have been handled well in our engine.
There are five important attributes in the
Range object. If you need to understand other detailed attributes and methods, please visit the browser API Range
startContainerrange start position node
startOffsetthe offset under the node where the range starts
endContainernode at the end of the range
endOffsetthe offset under the node where the range ends
collapsedindicates whether the start position and end position of the range are at the same position
Here we use anchor to indicate the start position, and focus to indicate the end position.
<p>a<anchor />bc<focus />d</p>
Below the p node is a paragraph of
abcd text, the type is
Text in the DOM tree, which is a text node. Both startContainer and endContainer point to
Text, offset is the character length startOffset=1, endOffset=3, although the pointing nodes are all Text, the offset is inconsistent, collapsed is false
Here we use range to indicate that the start position and end position of the range are in a coincident state
Below the p node is a span node, and below the span node is the text node
Text. Here, there are two ways of
Text, startOffset and endOffset are both 0
When the pointed node is not a
Text text node, offset represents the index value of the child node relative to the parent node
The meanings of these two methods are the same here, and in more complex DOM structures, there will be more complex expressions. In this case, we use the Range object to determine the position of the node and perform many operations. Uncertainty. So we extend the
RangeInterface type on the basis of Range to help us better control the
Range object. For more information, please see API
A zero-width character is a character that is not printed in the browser, and it has no width.
When the range position cannot be set, or there is a repair to the default browser default range position, the
zero-width character will be used to select the range next to the zero-width character. For example: , we want the range to focus on the span node, but there is no node in the span node, then we can add a zero-width character to the span node </ span>, and let the range select before or after the zero-width character, we can enter content in the span node.