gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:37:28 24 4
gpt4 key购买 nike

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

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

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

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

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

基于 this ,看起来范围可以应用于元素。

您如何确定最接近当前鼠标位置的开始/结束范围?

编辑:
一个如何使用 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 等节点触发,而不针对文本节点触发。即使是这样,这些节点也表示不支持将光标设置为鼠标在该文本 block 中的位置的文本 block 。

最佳答案

您正在尝试做的事情在浏览器中真的很难。我特别不熟悉ckeditor,但是常规的javascript允许您使用范围选择文本,所以我认为它不会添加任何特别的东西。您必须找到包含点击的浏览器元素,然后在被点击的元素中找到字符。

检测浏览器元素很简单:您需要在每个元素上注册处理程序,或者使用事件的目标字段。有很多关于这方面的信息,如果这就是您遇到的问题,请在 stackoverflow 上提出更具体的问题。

获得元素后,您需要找出元素中的哪个字符被单击,然后创建一个适当的范围以将光标放在那里。正如您链接到的帖子所述,浏览器变体使这变得非常困难。此页面有点过时,但对范围进行了很好的讨论:http://www.quirksmode.org/dom/range_intro.html

Ranges 不能告诉你它们在页面上的位置,所以你必须使用另一种技术来找出点击了哪些文本。

我从未在 javascript 中看到过完整的解决方案。几年前,我研究过一个,但我没有想出一个我满意的答案(一些非常困难的边缘案例)。我使用的方法是一个可怕的 hack:在文本中插入 span,然后使用它们执行二进制搜索,直到找到包含鼠标单击的最小 span。 Span 不会更改布局,因此您可以使用 span 的 position_x/y 属性来找出它们包含点击。

例如。假设您在节点中有以下文本:

<p>Here is some paragraph text.</p>

我们知道点击出现在本段的某处。用跨度将段落分成两半:
<p><span>Here is some p</span>aragraph text.</p>

如果 span 包含点击坐标,则继续在该半部分进行二分搜索,否则搜索后半部分。

这对单行很有用,但如果文本跨越多行,您必须首先找到换行符,否则跨度可能会重叠。您还必须弄清楚当点击不是在任何文本上而是在元素中时该怎么做——例如,在段落最后一行的末尾之后。

自从我在这个浏览器上工作以来,它变得更快了。它们现在可能足够快,可以在每个字符周围添加 s,然后在每两个字符周围添加等以创建易于搜索的二叉树。您可以尝试这种方法 - 它会使您更容易确定您正在处理哪条线路。

TL;DR 这是一个非常困难的问题,如果有答案,可能不值得你花时间想出它。

关于JavaScript 将鼠标位置转换为选择范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8128469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com