我怎样才能得到一个contenteditable html元素的光标行号？ [英] How can i get the cursor line number of a contenteditable html element?

问题描述

我该如何获得游标的行号或更好的游标在可用的身体元素中的偏移量这个？

解决方案

我找到了解决我的问题的方法，但只有在行高所有的行都是一样的。这个想法是在插入符号位置插入一个虚拟元素，计算相对于body start的位置，然后将该值除以行高。
结果是插入符号的行数。

这里有一些代码可供参考：

  //获取lineheight，eighter line-height或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'）; 
尝试{
 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; 
 
 //设定书签
 ed.selection.moveToBookmark（bm）; 
 
 var caret_line = Math.floor（（top）/ lineHeight）+ 1; 
  

I need to get the line number with the cursor in it or better the offset of the cursor in a contenteditable body element.

How can i achieve this?

解决方案

I found a solution to my problem, but it will only work if the line-height of all lines are the same. The idea is to insert a dummy element at the caret posititon, calculate the position relative to the body start and then divide this value by the line-height. The result is the number of line the caret is in.

Here some code to get started with:

        // 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;

这篇关于我怎样才能得到一个contenteditable html元素的光标行号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！