Question

我需要能够在页面上获得插入符号的坐标（如闪烁的光标线）。我的意图是覆盖一个类似于工具提示的元素，绝对定位为看起来像一个工具提示出现在插入符号下面。

我在运行之前已经从选择中得到范围（CKEDITOR.dom.range），并且范围总是折叠，所以我写的方法需要获得折叠范围的位置。

这是我到目前为止所做的：

/**
 * Get the position of a range
 *
 * @param   {CKEDITOR.dom.range}    range   The range (i.e. indicating where the caret is)
 * @returns {void}
 */
this.getRangePosition = function( range ){

    /* Start with wherever we are scrolled to */
    var top = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop || 0);
    var left = (window.pageXOffset || document.documentElement.scrollLeft) - (document.documentElement.clientLeft || 0);

    /* Figure out where the containing element (usually the <p>) is and add that's position on */
    var containingElement = range.startContainer.getParent(); // We know range range.startContainer is always text so getParent() takes us to the element 
    var rect = containingElement.getClientRect();
    top += rect.top + rect.height;
    left += rect.left;

    /* And then figure out how far along we are... */

};

问题是我不知道如何弄清楚该怎么做。我现在如何得到顶部的正确值，而不是左侧的正确值，因为我不确定从该元素的外部算出该范围的距离。

关于如何实现这一目标的任何想法？

Answer 1

对于遇到此事的其他人，我最终这样做了：

创建编辑器的快照和当前选择的书签
插入一个元素，然后在该tp上使用jQuery的.offset（）方法找出位置

恢复快照（不包含该元素）和选择书签

var snapshot = editor.getSnapshot();
var bookmarks = editor.getSelection().createBookmarks2( true );
var fakeElement = new CKEDITOR.dom.element( 'span' );
editor.insertElement( fakeElement );
var position = $(fakeElement.$).offset();
editor.loadSnapshot( snapshot );
editor.focus();
editor.getSelection().selectBookmarks( bookmarks );

获得范围的位置

1 个答案: