如何在contenteditable中跟踪插入符/光标？

Question

我想跟踪插入符号/光标的移动.不过,我不确定最好的方法是什么.

我正在听点击,keydown,keyup.(按键当然甚至不会触发箭头键或ctrl-x之类的东西.)

虽然点击工作正常,但keydown的问题是它在插入符号实际移动之前被触发,因此当我查询当前文档选择范围时,我得到旧位置而不是新位置.但是如果我依靠keyup来获取更新的位置,它就会触发太晚:按下键时插入符号就会移动,但是键会在任意时间后释放.

这一定是可能的,因为CKeditor之类的东西能够做到这一点.任何提示？

Answer 1

很高兴看到人们在谈论CKEditor :).我是它的开发者之一,我没有在选择方面做太多工作,但我会尽力帮助.

我所知道的是,我们有一个内部selectionChange事件.那么我们什么时候检查它是否改变了？......每200ms至少一次:)见:

http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/selection/plugin.js#L39

每当我们知道它可以被更改时我们也检查选择(例如通过API或keyup/mouseup或本地选择更改 - http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/selection /plugin.js#L554).所以...几乎所有的时间:) AFAIK我们做一些技巧,所以它不会烧掉你的CPU,但它仍然很重.但是,如果我们这样做,那么这是唯一可行的方法,让它工作得非常好.

不幸的是,选择处理是迄今为止wysiwygs世界中最糟糕的任务.它在所有新旧浏览器中都如此破碎.我上面链接的文件中超过75%的LOC是黑客和技巧.这完全是疯狂的.

Answer 2

在Mozilla和Opera中,处理键和鼠标事件的令人讨厌的业务是您唯一的选择.它不仅非常繁琐,而且并不涵盖所有情况:可以通过编辑和上下文菜单(例如,通过全选)更改选择.为了解决这个问题,您还需要添加某种选择对象的轮询.

但是,在IE(一直回到至少5.5)和最近的WebKit中,只要选择发生变化,就会有一个selectionchange事件触发文档.

document.onselectionchange = function() {
    alert("Selection changed!");
};

Mozilla将来有可能支持它:https://bugzilla.mozilla.org/show_bug.cgi？id = 571294