获取当前行和＆amp;这个有意义的元素中的线索引？

Question

我有一个像这样的元素：

<span contenteditable="">line 1
line 2
line 3
line 4
line 5
</span>

假设用户正在编辑“第4行”。如何获得当前的线和＆amp;那个有意义的元素中的线索引（在插入位置）？

Answer 1

这是一种使用选择属性和字符串拆分来计算偏移量的简单方法：

<pre contenteditable="">line 1
line 2
line 3
line 4
line 5
</pre>

<button onclick=getPos()>show pos</button>

<script>
function getPos() {
    var sel = document.getSelection(),
        nd = sel.anchorNode,
        text = nd.textContent.slice(0, sel.focusOffset);

    var line=text.split("\n").length;
    var col=text.split("\n").pop().length;
    alert("row:"+line+", col:"+col )
}
</script>

强制性小提琴：http://jsfiddle.net/9rvg81kw/

如果您的可编辑元素中包含许多元素，则可能需要将nd.textContent替换为elmWysiwygContainer.textContent以获取所有文本的行，而不仅仅是“当前”节点。