[英]Selection expands in any direction
I'm trying to animate scrolling behaviour in a TinyMCE contenteditable.我正在尝试为 TinyMCE contenteditable 中的滚动行为设置动画。 For this, i try to get the actual position of the cursor/caret.为此,我尝试获取光标/插入符号的实际 position。 One way for getting the 'end'-cursor would be:获得“结束”光标的一种方法是:
function getPositionFromSelection (selection, position = 'end') {
const prevRange = selection.getRangeAt(0).cloneRange()
if (position === 'start') { selection.collapseToStart() } else { selection.collapseToEnd() }
const caret = selection.getRangeAt(0).getBoundingClientRect()
selection.removeAllRanges()
selection.addRange(prevRange)
return caret.top
}
When i get the position like this it seems okay until i try to shrink the selection.当我得到这样的 position 时,在我尝试缩小选择范围之前,它似乎没问题。 The caret jumps to the other end of the selection and expands it.插入符号跳转到所选内容的另一端并将其展开。
MWE: https://codepen.io/hydrair/pen/PoePOoq MWE: https://codepen.io/hydrair/pen/PoePOoq
I can't reproduce the behavior you describe in Chrome or Firefox, but I can tell you it's not necessary to modify the selection as your code is doing.我无法重现您在 Chrome 或 Firefox 中描述的行为,但我可以告诉您,没有必要像您的代码那样修改选择。 Use thecollapse
method of your cloned range instead of collapsing/restoring the selection.使用克隆范围的collapse
方法而不是折叠/恢复选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.