可靠地在可编辑的div中获取和设置光标/插入位置

时间:2013-06-29 21:43:29

标签: javascript html editor

我正在构建一个简单的在线文档编辑器。在这个编辑器中,我希望将文本分解为页面,每个页面都是一个可信的div。

我想出了一个基本的算法来做到这一点。基本上我检查当前焦点的div,看它是否有比WORDS_PER_PAGE常量更多的单词。如果是,则取该页面的最后一个单词并将其放在下一页的开头。然后在下一页,然后是下一页等执行相同的检查,直到您到达页面的末尾。当按下的键是删除/退格键时,将执行类似的检查。

现在这个算法并不完美(每个页面的长度可变,取决于单词的长度),但它很适合我的需要。真正搞砸我的是设置光标位置并获取这些可编辑div的光标位置。我想要的只是一个函数getCursor (element),它将返回光标偏移的字符数和setCursor (element, n),它将光标设置为n个字符偏移量。

我没有给出关于IE<的废话。 9所以我不需要一个不稳定的解决方法。我也不能使用Rangy库或任何其他库。我已经尝试过使用Range和Selection对象,但我无法做任何事情。有没有人对我应该如何解决这个问题有任何想法或建议?

1 个答案:

答案 0 :(得分:0)

<div id="example-one" contenteditable="true" onclick="alert(window.getSelection().getRangeAt(0).startOffset)">

信用:http://www.sitepoint.com/forums/showthread.php?702589-set-caret-position-in-contenteditable-div