在此内容可编辑元素中获取当前行和行索引

Get current line & line index in this contenteditable element?

本文关键字：获取 索引 元素 编辑      更新时间：2023-09-26

我有一个这样的元素：

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

<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以获取所有文本的行，而不仅仅是"当前"节点。

相关文章：