时间戳

首页 > 解决方案 > Chrome中的三重选择导致多行选择

ckeditor - Chrome中的三重选择导致多行选择

问题描述

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

使用这个 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我担心这样的解决方案会破坏范围和选择，提供意想不到的行为

标签： ckeditorrangeselection

解决方案

由于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])
  }
}

推荐阅读