JavaScript将鼠标位置转换为选择范围

Question

我希望能够将当前鼠标位置转换为范围,特别是在CKEditor中.

CKEditor提供了一个API,用于根据范围设置光标:

var ranges = new CKEDITOR.dom.range( editor.document );
editor.getSelection().selectRanges( [ ranges ] );

由于CKEditor提供了这个API,因此可以通过删除此要求来简化问题,并且只是找到一种方法来从包含各种HTML元素的div上的鼠标坐标生成范围.

但是,这与将鼠标坐标转换为textarea中的光标位置不同,因为textareas具有固定的列宽和行高,CKEditor通过iframe呈现HTML.

基于此,看起来该范围可以应用于元素.

你如何计算出最接近当前鼠标位置的开始/结束范围？

编辑:如何使用ckeditor API在mouseup事件上选择范围的示例.

editor.document.on('mouseup', function(e) {
    this.focus();
    var node = e.data.$.target;

    var range = new CKEDITOR.dom.range( this.document );
    range.setStart(new CKEDITOR.dom.node(node), 0);
    range.collapse();

    var ranges = [];
    ranges.push(range);
    this.getSelection().selectRanges( ranges );
});

上述示例的问题在于,事件目标节点(e.data.$.target)仅针对HTML,BODY或IMG等节点触发,但不针对文本节点触发.即使它这样做,这些节点也代表不支持将光标设置到该文本块内鼠标位置的文本块.

Answer 1

有两种方法可以做到这一点，就像每个所见即所得的方法一样。

第一： - 你放弃了，因为它太难了，它最终会成为浏览器杀手；

第二： - 您尝试解析文本并将其放在原始文本上方的半透明文本区域或 div 中的确切位置，但这里我们有两个问题：

1）如何解析动态数据块以仅获取文本并确保将其映射到实际内容的确切位置

2）您将如何解决更新以解析您输入的每个该死的字符或您在编辑器中执行的每个操作。

最后，这只是一场“通往 DOM 树黑暗面的残酷冒险”，但如果您选择第二种方式，那么您帖子中的代码将像魅力一样工作。