问题标签 [rangy]

我在 Rangy 中使用荧光笔模块。

我有一个div元素，它有一些 html。html 实际上是使用 ajax 从文件中加载的，我有一个按钮来执行此加载。

加载文本后，我可以选择显示的 html 的一部分并按我的“突出显示”按钮。这会调用一些 Rangy 代码并根据需要突出显示文本......

出于复制的目的，请选择大部分作为第一个亮点。

接下来，我单击加载 html 按钮以重新加载 html。正如预期的那样，亮点消失了。但是现在我选择了另一个文本，它恰好与我所做的第一个突出显示重叠。现在，当我按下“突出显示”按钮时，由于某种原因，突出显示是上一个突出显示的那个。为什么会这样？

我知道必须与合并有关，但我不明白为什么。当我调试 JS 时，我可以看到选择 (from rangy.getSelection()) 是我所期望的。

这是问题的 JSFiddle 复制

我正在使用以下代码在 a 范围内插入链接。

我有以下功能，由按钮调用以保存所选文本。然后它显示包含用于链接插入的文本输入的 linkBar div。

注意：当我关注文本输入中的输入文本时，我会丢失选择，因此我尝试使用 toggleRange() 而不是 toggleSelection。

}

之后，一旦在前一个函数显示的同一 div 中单击按钮，我就会执行以下代码。

此函数调用以下函数将 linkApplier 应用于所选范围。但它不起作用

我在这里和谷歌搜索和搜索，但我没有找到任何解决方案，通过使用Rangy.js或原生 JS 来做到这一点如此简单。

如果我有简单的格式化文本要复制，比如..

如何将纯文本（没有样式文本）复制并粘贴到contenteditable元素？

我不关心旧的 IE。只是当前的 Firefox 或 Chrome 需要工作。

演示：http: //jsfiddle.net/72r6J/

I am using Rangy to help with some text highlighting functionality in a website. In short, the user can select some text, highlight the text (via button click), and the user can create multiple highlights this way.

The highlights are saved to a database, and at any point in the future the user can re-load the highlights.

However, I have a performance issue when using the restoreCharacterRanges which is part of the "TextRange" module. This performance issue becomes much more noticeable when there are more highlights to load.

Currently, I am using some code similar to below (just to point out, it works exactly how I want, it just isn't fast enough):

With the code example above, the performance issue occurs during the selection.restoreCharacterRanges call. It takes about 0.6 seconds to run in my test.

Now, when loading multiple highlights, I expectedly get this 0.6 second hit for each one, and this can quickly add up.

Is there something I can do to load multiple highlights more efficiently? Maybe with one call to restoreCharacterRanges?

I have attempted to push multiple selections to the selectionRanges array, but this seems to have undesired effects when the highlightSelection call is made (i.e. it only highlights the first)

我已经开始使用 Angular js，并且遇到了一个问题，需要在我的控制器中获取 DOM 的当前状态。基本上，我正在一个 contenteditable div 中构建一个文本编辑器。对 div 中文本的修订可以来自外部服务（来自服务器的长轮询推送）以及实际在字段中输入的用户。现在来自服务器的修订正在操纵我的角度模型，然后通过 ng-bind-html-unsafe 指令更新视图。唯一的问题是这会影响用户当前的光标位置和文本选择。

我已经找到了解决这个问题的方法，但它需要在我的控制器中直接操作 dom 元素，这在 Angular 中似乎是不鼓励的。我正在寻找对我当前方法的验证，或者对更“有角度”的东西的推荐。

基本上我所做的是在我的模型中添加了两个事件，“contentChanging”和“contentChanged”。第一个是在我更新模型之前触发的，第二个是在我更新模型之后触发的。在我的控制器中，我像这样订阅这些事件。

所以基本上，当内容发生变化时，我会抓取可编辑区域的当前 html。然后我使用rangy插件将隐藏的 dom 元素注入到文档中来标记用户当前的位置和选择。我使用不带隐藏标记的 html 和带标记的 html，并使用 google 的 diff_match_patch 库（dmp）制作补丁。

更改内容后，我调用 scope.$apply() 来更新视图。然后我从视图中获取新文本并应用之前的补丁，这会将隐藏的标记添加回 html。最后我使用范围来恢复选择。

我不喜欢的部分是我如何使用 jquery 从视图中获取当前 html 以构建和应用我的补丁。这会让单元测试变得有点棘手，而且感觉不太对劲。但是考虑到 rangy 库的工作方式，我想不出另一种方法来做到这一点。

我正在使用 Rangy 进行一些文本突出显示。用户选择一些文本，单击一个按钮，然后使用 Rangy 荧光笔模块突出显示文本。我还允许用户搜索文本，使用相同的荧光笔模块再次突出显示搜索结果。但是，对于搜索结果，我使用不同的类。

我遇到的问题是当我搜索包含在突出显示中的一段文本时。Rangy 对我来说太聪明了，并且正在将我想要成为具有不同类的两个跨度合并为具有多个类的单个跨度。虽然看起来不错，但问题来自“清除”搜索结果。这目前也删除了重叠的高光。

在生成的 HTML 方面，我目前有这样的东西：

但我想要的是跨度结果中的跨度，如下所示：

在创建荧光笔或 css 应用程序时我可以使用一些设置来给我这个结果吗？

我正在使用以下代码通过更改字体来编辑 contenteditable div 中的文本。当单击作为风格化下拉菜单的 div 时，选择会在 chrome 中消失。它在 Firefox、Opera 甚至 IE 中都能正常工作！

Rangy 没有找到任何要处理的选定文本。我想知道为什么！

注意：使用“鼠标悬停”而不是“点击”时效果很好

我只是尝试将 Hallo.js 编辑器添加到我的网站。它有点工作，但是当我编辑文本时，我在 Chrome 和 Firefox 中看到以下错误。在 Opera 中，它似乎工作正常。

您可以在 JSBin 上找到该行为的示例：http: //jsbin.com/unuces/2/

在hallo.js 的文档中，没有提到对 rangy 的依赖，所以我认为不需要它。有没有人已经有这方面的经验？

谢谢您的帮助。

==== 解决方法： ========

Rangy 未定义

当不包括 rangy 时会发生这种情况。为了让 Hallojs 正常工作，必须包括在内。

...没有方法 getSelected

如果动态加载 rangy，就会发生这种情况。要解决此错误，请在加载后调用 rangy.init()。

我刚刚下载了流行的Rangy library. 我有以下html

这是我的jQuery代码

我已经尝试过无数种使用 rangy 的方法，下面是我最接近的方法。在 chrome 和 IE8 中完美运行（就像我尝试过的许多其他版本一样），但 firefox 坚决拒绝玩球。

test() 函数应用于在选择页面上的一些粗体文本后单击的按钮。我想看到的是：

<b>blah</b> or <strong>blah</strong>

被替换为

<span style='font-weight:bold'>blah</span>

在 chrome 和 FF 中它可以工作，并且 console.log 行：

但是在FF中：

.

如果有人可以向我展示我的方式的错误，以便它可以在 FF 中像在 IE8 和 chrome 中那样工作，我将永远感激不尽。