问题标签 [rangy]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
253 浏览

javascript - 范围广泛的修复边界

选择文本时,选择开始和结束的确切位置会有所不同,有时它从前一个元素的末尾开始,有时在文本节点的开头。我正在尝试对此进行规范化,使其始终从包含文本的元素的开头开始,并在包含文本的元素的末尾结束,并使其在浏览器中保持一致。

例如<b>mouse></b><i>cat</i>

选择“cat”时,chrome 似乎总是做正确的事情并返回一个带有 startContainer cat 和 startOffset 0 的选择。Firefox 和偶尔的 IE8 通常会从前一个元素(鼠标)的末尾开始,startOffset 为 5

我试图解决这个问题的粗略尝试没有成功:

我错过了什么?

0 投票
3 回答
7867 浏览

javascript - 由于错误 800a025e 无法完成操作

这个错误在 IE10/11 中是什么意思:

我将如何调试它?

它说它的这一行:

https://code.google.com/p/rangy/source/browse/trunk/src/js/core/wrappedselection.js#416

在这里查看它的实际效果:http: //panmedia.github.io/raptor-editor/tests/cases/selection/selection-expand.html

0 投票
2 回答
1635 浏览

javascript - JQuery,如何在html中选择文本后附加div?

嗨,可以在选定文本后添加 div 吗?使用 jQuery 或 java-script 和 rangy js

我正在尝试使用以下代码但无法正常工作..

0 投票
0 回答
395 浏览

javascript - Rangy js,为选定文本创建的跨度标签,那么如何在跨度标签中附加div选定的文本?

为选定文本创建的跨度标签,那么如何在跨度标签内为选定文本附加 div?

我的代码如下:

输出:<span style="background-color: rgb(227, 246, 206);">release </span><div> </div> 在创建我的 div 之后,

但是如何在 span 标签中创建这个 div?喜欢

0 投票
0 回答
170 浏览

google-chrome - 为什么“显示:无”的跨度会阻止删除前面的“contententeditable = false”跨度?

这种行为特定于 Chrome(在编写版本 26.0.1410.64 m 时,但我知道它已经发生了一段时间)。

采用以下 HTML:

在生成的 ContentEditable Div 中,将插入符号放在“中断”跨度之后。然后尝试使用退格键将其删除。你会发现这是不可能的。

这是一个说明这一点的jsfiddle

请注意,在“中断”跨度之后立即键入一些文本可以解决问题,因为您可以向左箭头返回跨度完成的位置并像往常一样成功退格。但是,一旦您删除此文本,问题就会再次出现。

我特别关心它,因为 Span是我正在使用的范围和选择库Rangydisplay: none的一个组成部分。我发现使用 Rangy 有时会阻止 Span 被删除,这似乎是根本原因。

0 投票
0 回答
406 浏览

javascript - 在不丢失选择的情况下获取用户选择的开始和结束的像素位置

我正在开发一个 javascript 库,该库以像素为单位获取用户选择的位置(他们突出显示的内容)。

为了实现这一点,我向 DOM 添加了不可见的标记并使用 jQuery.position来获取像素位置。这些 DOM 更改会导致用户选择丢失,因此我需要以编程方式重新创建它。

我使用rangy库来处理跨浏览器的范围和选择。

这是有效的,但是有一个错误一直困扰着我好几天,我似乎无法破解。重新创建选择后,如果用户Shift按住LeftRight,则选择不会在 Chrome 中正确增长和缩小。

小提琴显示问题:http: //jsfiddle.net/dvQ4g/3/

用鼠标从左到右突出显示“This is some text”的一部分。

现在,如果您Shift+Right选择按预期从右侧扩展。

但是,如果您Shift+ Left,则选择不会像预期的那样从右侧缩小。相反,它从左侧生长。

(注意...如果您按下Shift+Left一次,它也会更改突出显示方向,因此您需要重新选择才能看到从右侧扩展再次正常工作。)

这发生在 Chrome 中,但不是 Firefox 或 Safari。

我想我已经知道为什么了。Chrome 不会强制执行方向,除非您明确表示它是向后的。否则,它会等着看用户先做什么。如果他们Shift+ Right,它将成为一个前向选择。如果他们Shift+ Left,它将成为向后选择。因此,在 Chrome 中,以编程方式创建转发选择实际上根本不是转发……它是一个等待方向的选择。

但是知道了这一点,我该怎么做呢?我认为我需要用一种不会导致选择丢失的方法来找到选择边界。这种方法有什么想法吗?

0 投票
1 回答
878 浏览

javascript - Rangy - insertNode IE < 9 不在插入符号处插入

为了兼容性,我使用 Rangy 在 WYSIWYG 编辑器 (uEditor) 中插入节点。

它可以工作,但是在 IE < 9 中,插入的节点被放置在包含元素 (iframe) 的开头,而不是插入符号的位置。这仅在没有文本选择时发生。

我创建了一个小提琴,它很粗糙,但虽然使用 div 而不是 uEditor 使用的 jquery/iframe 东西,但具有相同的效果。

这是小提琴:http: //jsfiddle.net/RvNT3/

对于 IE < 9:http: //jsfiddle.net/RvNT3/embedded/result/

我知道小提琴不能代表我的实际代码,最终可能取决于浏览器。但是,如果有一种方法可以让它工作(插入插入符号而不选择文本),那可能就可以解决问题。

小提琴代码:

0 投票
0 回答
934 浏览

javascript - Rangy.js - 将评论保存到突出显示的文本

我目前正在实现非常酷的范围和选择库 Rangy.js。我想实现一个可以突出显示某些文本的功能,然后将注释添加并保存到突出显示。在演示中,它展示了如何向选择添加注释 - 但只有一个 ID 附加到选择。

我正在尝试这样的事情,我在元素上创建一个评论属性:

然后在突出显示文本时,注释存储在“comment”属性中:

当我序列化我的亮点时,评论不包括在内。

有没有人用 Rangy.js 尝试过这个或类似的东西?

任何帮助表示赞赏,在此先感谢!

0 投票
1 回答
642 浏览

android - rangy反序列化不适用于webview android

我正在尝试在我的一个使用 webview 的 Android 项目中为 epub 阅读器制作“荧光笔”。我正在使用 Rangy 获取选定的文本。从下面的示例 HTML 中选择文本后,序列化函数给了我这个值:

我将其存储在数据库中。当用户返回此页面时,我正在检索相同的选择并尝试反序列化,但反序列化函数会引发以下错误:

我明白为什么会发生这种情况??即使我正在尝试使用 XPath 做同样的事情,但仍然是同样的问题。

有什么猜测吗??

0 投票
0 回答
248 浏览

android - webview中加载的HTML页面的DOM结构不一致

我正在WebView 中为 Android制作荧光笔。

出于突出目的,在一个示例中,我在另一个纯JavascriptXPath中使用JQueryRangy。我也在桌面浏览器中尝试相同的亮点

请参考我之前发布的问题,了解我在突出显示期间面临的问题......

-->>使用XPath时的问题

-->>使用Rangy时的问题 (尚未回答!)

所以...从对这些问题的回答中,我得出的结论是

WebView中加载的HTML的DOM结构与桌面浏览器中加载的相同HTML页面的DOM结构不一致且不同,主要参考“TextNodes” ..

为了支持这个结论,我创建了一个 jsFiddle(问题中的链接)。但是,我也认为 WebView 可能不会改变 DOM 结构,但它肯定会在 div 内返回不正确的TextNodes ...

现在的问题是,有没有办法阻止 WebView 中 HTML 的 DOM 结构发生这种变化? 有没有见识的大佬