我正在尝试使下拉菜单跟随Web的RTF编辑器中的光标移动。使用以下代码,我可以毫无问题地获得光标的坐标:

const sel = window.getSelection();
if (!sel || sel.rangeCount === 0) return;
const position = sel.getRangeAt(0).getBoundingClientRect());


但是,如果尝试在\n字符后使用此字符,它将返回光标在换行符之后的位置,而不是换行符的开头(光标实际出现在窗口中):
javascript - 换行符后的getBoundingClientRect位置不正确-LMLPHP

有办法避免这种情况吗?

编辑:根据下面的评论,这是我想要实现的更深入的版本。

我目前正在使用React和Slate.js(https://github.com/ianstormtaylor/slate)构建文本编辑器。它是contentEditable组件的更强大版本,但允许您将可编辑文本字段放入页面中。由于我使用的是节点结构,因此我希望段落之间可以有软间隔,而不是新的<div />元素。由于这是contentEditable的非标准行为,因此在不重新创建整个应用程序的情况下很难举一个小例子。

编辑(对评论的进一步回应):
文本元素的原始HTML如下所示:

<span data-slate-string="true">working until newline
see?
</span>


您会看到,slate从字面上将中断转换为\ n字符,这是我认为引起问题的原因。

最佳答案

即使使用浏览器的默认contenteditable,当将光标设置到新行时,的确也会发生怪异的行为:Range的getClientRects()将为空,因此getBoundingClientRect()将返回完整的0 DOMRect。

这是一个演示该问题的简单演示:



const target = document.getElementById('target');

document.onselectionchange = (e) => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) {
    return;
  }
  const range = sel.getRangeAt(0);
  const position = range.getBoundingClientRect();

  floater.style.top = position.bottom + 'px';
  floater.style.left = position.right + 'px';
}

#floater {
  position: absolute;
  width: 20px;
  height: 30px;
  background: #DDAADDCC;
  pointer-events: none;
  bottom: 0;
}

<div id="target" contenteditable>Type here and enter new lines</div>
<div id="floater"></div>





为此,有一个简单的解决方法,包括选择当前Range容器的内容:

// check if we have client rects
const rects = range.getClientRects();
if(!rects.length) {
  // probably new line buggy behavior
  if(range.startContainer && range.collapsed) {
    // explicitely select the contents
    range.selectNodeContents(range.startContainer);
  }
}




const target = document.getElementById('target');

document.onselectionchange = (e) => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) {
    return;
  }
  const range = sel.getRangeAt(0);

  // check if we have client rects
  const rects = range.getClientRects();
  if(!rects.length) {
    // probably new line buggy behavior
    if(range.startContainer && range.collapsed) {
      // explicitely select the contents
      range.selectNodeContents(range.startContainer);
    }
  }

  const position = range.getBoundingClientRect();

  floater.style.top = position.bottom + 'px';
  floater.style.left = position.right + 'px';
}

#floater {
  position: absolute;
  width: 20px;
  height: 30px;
  background: #DDAADDCC;
  pointer-events: none;
  bottom: 0;
}

<div id="target" contenteditable>Type here and enter new lines</div>
<div id="floater"></div>





现在,OP似乎处于另一个问题,因为它们确实处理软中断\nwhite-space: pre
但是我只能从我的Firefox复制它。在这种情况下,Chrome表现为“符合预期” ...

因此,在我的Firefox中,DOMRect不会全为0,而是换行前的那个。

为了演示这种情况,请单击空白行:



const target = document.getElementById('target');

document.onselectionchange = (e) => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) {
    return;
  }
  const range = sel.getRangeAt(0);
  const position = range.getBoundingClientRect();

  floater.style.top = position.bottom + 'px';
  floater.style.left = position.right + 'px';
}

#target {
  white-space: pre;
}
#floater {
  position: absolute;
  width: 20px;
  height: 30px;
  background: #DDAADDCC;
  pointer-events: none;
  bottom: 0;
}

<div id="target" contenteditable>Click on the below empty line

Click on the above empty line</div>
<div id="floater"></div>





要解决这种情况,它要复杂一些...
我们需要检查Range之前的字符是什么,如果是新行,则需要通过选择下一个字符来更新我们的范围。但是,这样做还需要移动光标,因此实际上我们需要从克隆的Range中进行操作。但是由于Chrome的行为并非如此,因此我们还需要检查前一个字符是否在不同的行上,如果没有这样的前一个字符,这将成为问题...



const target = document.getElementById('target');

document.onselectionchange = (e) => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) {
    return;
  }
  const range = sel.getRangeAt(0);
  // we can still workaround the default behavior too
  const rects = range.getClientRects();
  if(!rects.length) {
    if(range.startContainer && range.collapsed) {
      range.selectNodeContents(range.startContainer);
    }
  }

  let position = range.getBoundingClientRect();
  const char_before = range.startContainer.textContent[range.startOffset - 1];
  // if we are on a \n
  if(range.collapsed && char_before === "\n") {
    // create a clone of our Range so we don't mess with the visible one
    const clone = range.cloneRange();
    // check if we are experiencing a bug
    clone.setStart(range.startContainer, range.startOffset-1);
    if(clone.getBoundingClientRect().top === position.top) {
      // make it select the next character
      clone.setStart(range.startContainer, range.startOffset + 1 );
      position = clone.getBoundingClientRect();
    }
  }

  floater.style.top = position.bottom + 'px';
  floater.style.left = position.right + 'px';
}

#target {
  white-space: pre;
}
#floater {
  position: absolute;
  width: 20px;
  height: 30px;
  background: #DDAADDCC;
  pointer-events: none;
  bottom: 0;
}

<div id="target" contenteditable>Click on the below empty line

Click on the above empty line</div>
<div id="floater"></div>

10-05 21:04
查看更多