获取插入符号所在的每行可内容编辑的div中的字符数

Question

我为自己的网站制作了一个文本编辑器，以便即时通讯使用contenteditable div。当我将插入符号放在该行上时，我需要获取该行的字符数。这是我的div

<div class="article" contentEditable=true ></div>

我尝试过这段jquery代码

$('.article').on("DOMSubtreeModified",function(){
var len = $('.article').text().length;
$('#output').val(len);
});

但这给出了div中的全部字符数。我想获取插入符号所在行的字符数，并在任何textarea中输出结果

<div class="article" contentEditable=true >
 line1
 <div>line--2</div>
 <div>line---3</div>
 </div>

<textarea id="output"></textArea>

所以如果我将插入符号放在line1上，textarea实时地在其中插入“ 5”，如果我将插入符号放在line3，即line --- 3，textarea实时地在其中插入= 8。帮助弄清楚该怎么做？