javascript - 获取此 contenteditable 元素中的当前行和行索引？

Question

我有这样一个元素:

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

假设用户正在编辑“第 4 行”。如何在该内容可编辑元素中获取当前行和行索引(在插入符号位置)？

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>

强制 fiddle :http://jsfiddle.net/9rvg81kw/

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