问题标签 [rangy]

我有一个<div />它contenteditable可以包含多种类型的 HTML 元素，例如<span />、<a />、<b />等<u />。

现在，当我在我的文本中选择文本时，我contenteditable希望有一个按钮来删除选择中的所有样式。

示例 1：

选择：

会成为：

示例 2：

选择：

会成为：

你明白了……

我发现这个有用的功能https://stackoverflow.com/a/3997896/1503476用自定义文本替换当前选择。但我只是无法先获取选择的内容，然后在替换之前去掉标签。我怎样才能做到这一点？

我不明白为什么我不能得到正确的范围对象。我很难解释这个问题。

例如：我有五个 div，每个 div 包含一个短语。从逻辑上讲，如果我在其中一个 div 中触发mousedown事件，我可以获得事件目标。好的，这是初级的。

但是，如果我在事件上使用范围对象mousedown，则事件目标始终是我单击的，但range.startContainer指向前一个 div；

看看这个小提琴：

重现问题的步骤（参见控制台）：

1. 在第一行按住鼠标按钮（控制台说“未定义” [*]）
2. 释放鼠标按钮（范围现在安全地指向第一行）
3. 在第四行按住鼠标按钮（控制台说“第一行”）
4. 控制台显示上一个单击的行

[*] 未定义，因为文档还没有范围，但这无关紧要，因为我可以即时创建一个并将他注入到文档中。

我可以推断出 mousedown 事件是在范围之前执行的。或者不是？

我知道如何使用这样的属性设置<a />标签：hrefcontenteditable

这将导致

但是我无法弄清楚如何设置锚点name而不是href.
这是我想要的结果：

谁能帮我？

旁注：我使用 jQuery 和 Rangy 作为库，但是我更喜欢直接与 execCommand 一起使用的解决方案。

更新：这是一个 jsfiddle： http: //jsfiddle.net/fjYHr/选择一些文本并单击按钮。我想要的是，单击按钮会插入一个链接，其中设置了名称属性而不是 href。

我正在通过我的动态网页上的 rangy 保存选择。但是当我重新加载页面并恢复选择时，我收到以下错误：

错误：deserializeRange：序列化范围根节点 (f3909155) 和目标根节点 (c21b08a9) 的校验和不匹配

页面源根本没有改变，所有的 HTML 都是一样的。我正在使用 Tikiwiki CMS。有什么想法吗？

我的代码：

但是当我打电话时

它总是呈现具有相同 id 属性的跨度，我如何设置 id 属性动态？

我使用rangy突出显示选择文本（它用 span 标签包装选择文本）。但是当我选择文本和图像时，它会生成一个跨度标签，但跨度不能包装 img 标签。它附加在 img 标签之前。

我的代码

我将 elementTagName 更改为 div 但没有更改。

那么，如何包装 img 或 object 标签或 input 标签。通过高亮元素 by rangy？

为什么用函数highlighter.highlightSelection（marktype）做的注解数量越来越多时，rangy会变得更加迟钝？一开始性能非常好，但随着注释的增加而降低。

那么，我该怎么做才能提高功能的性能highlighter.highlightSelection()呢？因为当我选择了我的 html 的许多不同部分时，性能会呈指数级下降。如果您选择很长的 html 片段，则性能将最差。我试图解决这个问题，但我不知道如何解决。

有谁知道为什么会发生这种情况？

我正在与 rangy 合作，并遇到了一个与选择及其跨浏览器行为有关的问题。

我在 div 中有一些元素（例如超链接），我希望能够在单击该元素内部时选择outerHTML 。

因此，我尝试range.selectNode()并期望选择整个节点，以便selection.toHtml()为我提供超链接的 outerHTML。要获得 innerHTML 我会调用range.selectNodeContents(). 这就是它在 IE 9 中的工作方式。

但在 Chrome 中，在这两种情况下都只选择了 innerHTML。rangy 插件（应该是跨浏览器）中是否存在错误，或者我做错了什么？

检查这个小提琴，看看我的意思。首先在 IE 9 中打开它，将插入符号放在超链接内，然后单击第一个按钮（检查输出selection.toHtml()）。然后再次将插入符号放在超链接内并单击第二个按钮（再次检查输出）。之后在 Chrome 中执行相同的操作。

我想做的事 ：

-> 向用户显示纯 HTML 页面 -> 用户能够突出显示该页面上的文本-> 当用户下次登录时，我应该能够检索并在页面上显示他之前的（多个）突出显示。

我做了什么 ：

我使用了库/API：Rangy。有了这个我可以选择文本并用用户喜欢的颜色突出显示它。

问题 ：

我尝试了序列化和反序列化功能，但是当我尝试反序列化（重新加载页面后）它给我一个错误说

序列化范围根节点 (ec0c8cf0) 和目标根节点 (d4997863) 的校验和不匹配

每次我重新加载页面时，都会有一个新的根节点，在这种情况下我该如何修复反序列化？

创建了一个 JS-Fiddle：demo / js-fiddle

这是什么 - 如果你查看我的演示，我选择描述的第一个词，即“请”，我得到突出显示的文本，我也得到序列为：

0/3/1/3/0/1/1/2:9,0/3/1/3/0/1/1/2:9{b3002d92}

所以我所做的是，我对这个序列进行了硬编码，并将其放入页面 onLoad 函数中的 deserializeSelection 函数中，如下所示：-

所以从技术上讲，它应该在描述中突出显示“请”，无论何时加载页面，但它没有，而是在块中给我上述错误。你能帮我解决这个问题吗？请。谢谢

额外的：

1.我真的不明白rangy的序列化和反序列化方法。

2.我从这里开始的非常抽象的路线图是，在页面加载时执行 AJAX 调用，并从我的数据库中获取此页面的所有（序列化）用户选择，然后遍历它们并进行反序列化。

任何帮助将非常感激。谢谢你。

我正在使用 Rangy 中提供的荧光笔模块，它在为所选文本创建高亮显示时效果很好。

在对 html 的更改方面，选定的文本将替换为 span 标签，例如如下所示：

我想要做的是在创建 span 元素后获取它的引用，这样我就可以用它做一些其他的事情。如何才能做到这一点？

请注意，其他地方可能有其他带或不带高亮标签的跨度，因此无法使用这些跨度找到它。

我必须为所选文本创建突出显示的代码的重要部分是：