Wie die Zeilennummer des Cursors in Absatz bekommen

Question

<div class="content" contenteditable="true"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div> 

JavaScript-Code hierfür ist

var divheight = $(".content").height(); 
var lineheight = $(".content").css('line-height').replace("px",""); 
alert(Math.round(divheight/parseInt(lineheight))); 

css ist

.content { 
    line-height:20px; 
} 

zum Beispiel, wenn der Klick innerhalb .content die <span class="cursor"></span>

.cursor { 
    border-left: 1px solid black; 
    margin-left: -1px; 
    color: #2E3D48; 
} 

, wie die .cursor zu finden, ist inder Zeilennummer .content

gerade versucht Mockup Geige

https://jsfiddle.net/1ok3dah9/

Answer 1

sehr primitiv Beispiel (vorausgesetzt, dass .cursor das Ziel und wir können seine Linienhöhe ableiten zu finden Offset):

;(function($){ 
 
    // $(...).lineNumber([cursorClassName = 'cursor']); 
 
    // Locates the pseudo-line number of the .cursor within the target element. 
 
    // This is based on two thigns: 
 
    // 1. The target element has a line-height, and 
 
    // 2. The target element has a .cursor element we can position 
 
    // Basic math is performed based on line-height and the .cursor's current 
 
    // vertical offset. 
 
    $.fn.lineNumber = function(cursorClassName) { 
 
    // in case we wanted to target a new class name 
 
    cursorClassName = 'cursor'; 
 
    
 
    // locate the cursor within the current element 
 
    \t var $cursor = this.find('.'+cursorClassName); 
 
    if ($cursor.length) { // check for .cursor 
 
     var lineHeight = parseInt($cursor.css('line-height').match(/\d+/)[0]), 
 
      topPosition = $cursor.position().top; 
 
     // divide top offset by line height. Apply integer division and return 
 
     // the approx. line number. In this case, lines are zero-based, so offset 
 
     // by 1. 
 
     return ~~(topPosition/lineHeight) + 1; 
 
    } 
 
    return -1; // no match 
 
    }; 
 
})(jQuery); 
 

 
$('.lineNumber').text($('.content').lineNumber()); 
 
// Go full-screen to see it work based on window size (e.g. word-wrapping) 
 
$(window).on('resize', function(){ 
 
    $('.lineNumber').text($('.content').lineNumber()); 
 
});

.content { 
 
    line-height:20px; 
 
} 
 
.cursor { 
 
    border-left: 1px solid black; 
 
    margin-left: -1px; 
 
    color: #2E3D48; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="content" contenteditable="true"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived<span class="cursor"></span> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 

 
<pre>Line #: <span class="lineNumber" style="color:#f00;"></span></pre>

Hier ist eine Geige, wenn man sich spielen wollte: https://jsfiddle.net/np8owsbv/2/

ich die Geige Fenster und Ändern der Größe und scheint richtig zu justieren gebunden. Könnte auch mit .cursor Position spielen und sehen, wie es messe.