我也在尝试做同样的事情,但是当光标位于行首时计算坐标似乎无法正常工作。请问您是如何解决这个问题的?您是如何在光标处插入元素的? - Rafael
4大致意思是:创建一个<span>元素,向其中添加一个零宽度空格字符,然后将该<span>元素插入到当前选中文本的范围内。具体代码如下:var span = document.createElement("span");
span.appendChild(document.createTextNode("\u200b")); // 添加零宽度空格字符
window.getSelection().getRangeAt(0).insertNode(span); // 将 元素插入选中文本范围内 - Tim Down
@TimDown 谢谢!我错过了零宽度空格字符,不确定为什么需要添加它?另外,我认为新创建的元素需要被赋予一个ID,以便在使用后删除它。 - Rafael
4@RafaelDiaz: 零宽度空格字符可确保浏览器不将元素完全折叠,从而确保其具有边界矩形。很抱歉,我不记得这是否符合规范。至于ID,如果您保留对span的引用,则不需要ID。在我之前评论中的代码之后,您只需执行span.parentNode.removeChild(span)即可将其删除。 - Tim Down
<span>
元素,向其中添加一个零宽度空格字符,然后将该<span>
元素插入到当前选中文本的范围内。具体代码如下:var span = document.createElement("span"); span.appendChild(document.createTextNode("\u200b")); // 添加零宽度空格字符 window.getSelection().getRangeAt(0).insertNode(span); // 将 元素插入选中文本范围内
- Tim Downspan.parentNode.removeChild(span)
即可将其删除。 - Tim Down