Chrome 中的三次选择导致多行选择

Question

我在 CKEditor4 上实现了所见即所得（基本上我只是重写了工具栏）。问题是将鼠标拖动到 select 并三次单击一条线到 select 它会产生不同的范围。

有了这个html:

<h2>^Leo ac scegliere e iniziare^</h2> <<< Line I want to select
<p>nunc ultrices eros, sed gravida</p>

这些是在不同场景下产生的范围：

从右到左和从左到右

startContainer和endContainer一样，都是从用户的角度反映实际情况。

collapsed: false
document:CKEDITOR.dom.document {$: document}
endContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
endOffset: 1 
startContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
startOffset: 0

三重select离子

startContainer和endContainer不一样，不代表用户的实际情况。

collapsed: false
document:CKEDITOR.dom.document {$: document}
endContainer: CKEDITOR.dom.element {$: p, getName: ƒ}
endOffset: 0 
startContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
startOffset: 0

这种差异导致我在应用样式时遇到问题。这种情况在 Chrome 中发生，但在 Firefox 中没有。

知道为什么会这样吗？任何解决方案？我一直在考虑检查 endContainer 和 endOffset 的解决方案，但我担心这样的解决方案会破坏范围和 selection 提供意外行为

Answer 1

作为 mouseup event 的结果，我想到了这个：

fuction handleMouseup(event) {
  if (event.detail === 3) {
    const selection = this.editor.getSelection()
    let range = selection.getRanges()[0]
    let actualStartContainer = range.startContainer

    // Finds the highest parent untill the startContainer
    while (!actualStartContainer.getParent().equals(this.editor.element))
        actualStartContainer = actualStartContainer.getParent()

    // Select the ranges and update the selection with just the startContainer
    range.selectNodeContents(actualStartContainer)
    selection.selectRanges([range])
  }
}

Chrome 中的三次选择导致多行选择

Triple selection in Chrome result in multiple line selection

range

selection

ckeditor