Question

我在CKEditor4之上实现了一个WYSIWYG（基本上我只是重写了工具栏）。问题是拖动鼠标选择并三行单击以选择它，会产生不同的范围。

使用这个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

三重选择

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的解决方案，但我担心此类解决方案会破坏范围和选择，从而带来意外行为

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中的三重选择会导致多行选择

1 个答案: