Question

我需要在其中使用光标获取行号，或者更好地获取光标在可满足的body元素中的偏移量。

我如何实现这一目标？

Answer 1

我找到了解决问题的方法，但只有当所有行的行高相同时才会有效。我们的想法是在插入符号位置插入一个虚拟元素，计算相对于正文开始的位置，然后将该值除以行高。结果是插入符号所在的行数。

这里有一些代码来开始：

        // get lineheight, eighter line-height or min-height
        var $elem = $(ed.getBody().firstElementChild);
        var lineHeight = parseInt($elem.css('line-height'), 10) || parseInt($elem.css('min-height'), 10);

        var rng = ed.selection.getRng();
        rng.collapse(true);

        var bm = ed.selection.getBookmark();
        var $marker = $(ed.getBody()).find('#'+bm.id);
        var elem = ed.getDoc().getElementById(bm.id+'_start');
        try {
            box = elem.getBoundingClientRect();
        } 
        catch(e){}

        var doc = ed.getDoc(),
            docElem = doc.documentElement,
            body = ed.getBody(),
            win = ed.getWin(),
            clientTop  = docElem.clientTop  || body.clientTop  || 0,
            clientLeft = docElem.clientLeft || body.clientLeft || 0,
            scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop,
            scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
            top  = box.top  + scrollTop  - clientTop,
            left = box.left + scrollLeft - clientLeft;

        // set Bookmark
        ed.selection.moveToBookmark(bm);

        var caret_line = Math.floor( (top) / lineHeight ) + 1;

Answer 2

这是我关于这个主题的旧工具之一。

/**
 * @description This operation splits the content of a text area based on its cursor position
 *              and selection.
 * @param targetNode This argument expects the text node to be split.
 * @return This operation returns an object containing {first, middle, last}.
 */
var splitTextAreaBySelection = function(targetNode)
{
  var target = document.getElementById('Area_'+targetNode.uid);
  var response = {};

  // IE fails this DOM3 operation. Use IE proprietary code here to recover.
  // WARNING: This proprietary IE code has Win32 platform dependency!
  if (typeof(target.selectionStart) === "undefined")
  {
    var content = targetNode.content;
    // this captures the area selected text.
    var r = document.selection.createRange();
    if (r !== null) {
      // thankfully the middle is easy to get!
      response.middle = r.text;
      // now we must create a new text range and mess with it until the cursor             position can be discovered.
      var re = target.createTextRange();
      var rc = re.duplicate();
      re.moveToBookmark(r.getBookmark());
      rc.setEndPoint('EndToStart', re);          
      var cursorPos = rc.text.length;
      // now that we have the cursor position, we can abstract the first and last         strings from the content.
      response.first = content.substr(0,cursorPos);
      response.last = content.substr(cursorPos + response.middle.length);
    }
    else
    {
      response.first = content;
    }
  }
  else
  {
    response.first = target.value.substring(0,target.selectionStart);
    response.middle = arget.value.substring(target.selectionStart, target.selectionEnd);
    response.last = target.value.substring(target.selectionEnd, target.textLength);
  }
  return response;
};

如何获得一个可疑的html元素的光标行号？

2 个答案: