如何从 contenteditable 中获取“插入符号位置”？

Posted 2023-05-08

【中文标题】如何从 contenteditable 中获取“插入符号位置”？

【英文标题】：How can I get the "drop caret position" from contenteditable?

【发布时间】：2016-07-12 09:38:18

【问题描述】：

如果从contenteditable 中拖动一个元素，浏览器通常会显示如下图所示的“中间插入符号”：

我正在寻找一种简单可靠的解决方案，通过拖放将元素 ID 作为传输数据发送到 contenteditable 中拖动元素。然后，在ondrop 方法中，我打算将draggable 放在这个“中间插入符号”当前所在的确切位置。

问题是：我能否从所有浏览器中获取这些信息？

我确实有一个基础 (JSFiddle)，但目前对我来说还远远没有用处。

PS：我没有使用 jQuery 或任何其他库。

【问题讨论】：

我可以制作这个：jsfiddle.net/jkLhfzr8，这就是你想要的吗？

@dandavis 天哪，这真是天才！这应该适用于所有浏览器，对吧？看起来他们中的大多数人都会支持这一点的机会很好。我现在正在寻找一个简单的解决方案，到目前为止最有希望的解决方案是this ..我也在考虑简单地切换元素但是我无法做到这一点。让我检查一下这个解决方案，但这对我来说似乎是 the 答案！ :)

@dandavis 谢谢老兄！我想我会同意的，请写一个博客或关于这个的东西，因为老实说......做一些简单的事情真的花了我一段时间才知道如何做。您也可以提供您的答案here，因为它们密切相关。

我认为它适用于所有 DND 浏览器，我什至避免使用 elm.remove() 并改用向后兼容的 parent.removeChild...

@dandavis 太棒了！随时提供答案！ :)

【参考方案1】：

查看document.caretRangeFromPoint 和e.rangeParent, e.rangeOffset。

这是一个演示 https://jsfiddle.net/znghofxt

function dragElement(e) 
  e.dataTransfer.setData('text/plain', e.target.id);


function drop(e) 
  e.preventDefault();
  var id = e.dataTransfer.getData("text/plain");
  if (document.caretRangeFromPoint) 
    // edge, chrome, android
    range = document.caretRangeFromPoint(e.clientX, e.clientY)
   else 
    // firefox
    var pos = [e.rangeParent, e.rangeOffset]
    range = document.createRange()
    range.setStart(...pos);
    range.setEnd(...pos);
  

  range.insertNode(document.getElementById(id));

.fancy 
  background-color: #123456;
  color: white;
  border-radius: 8px 8px 8px 8px;
  cursor:pointer; 
  display: inline-block;
  padding: 20px;


.fancy-img 
  cursor:pointer; 
  display: inline-block;

<div contenteditable="true" ondrop="drop(event)">   
  More blah
  about 
  <a id="dragme" href="http://www.google.com" class="fancy" contenteditable="false" ondragstart="dragElement(event)">       
    :(
  </a>
  Sparta!
</div>