问题标签 [rangy]

这是this的后续问题。我已经序列化了 iframe 中的文本选择并想要恢复它，但它给了我一个错误，“未捕获的错误：deserializeRange：序列化范围根节点 (XXXXX) 和目标根节点 (XXXXX) 的校验和不匹配”

演示：http: //jsfiddle.net/codef0rmer/2d6Bk/1/

我一直在使用 Rangy.js 进行选择范围，到目前为止非常喜欢它。我希望将选择范围的文本节点包装在某个标签内，并在单击按钮时切换它。我使用 cssClassApplierModule 让它工作得很好，除了（并且由于名称而有意义）我还必须给 dom 元素一个它应用到自身的类。

所以现在当我选择一个范围并应用一个强标签时，我的最终结果是：

我希望它是：

我到目前为止的代码如下：

我尝试使用 "" 和 null 而不是 "text" 作为传递的 css 类，它会切换，但不再关闭，显然不是正确的解决方案。

任何帮助表示赞赏.. 谢谢！

在http://rangy.googlecode.com/svn/trunk/demos/core.html有一个演示，展示了如何获取用户选择的内容的 HTML。

但是，我还想获得节点的整个结构，从顶级节点到所选内容所属的节点。我如何获得这个节点结构？例如，请看下面的示例内容

现在，如果用户只选择内容“用户选择的一些示例文本......”并且如果使用我给出的上述示例（使用“rangy”库），那么只有文本“一些示例文本已被用户选择...”显示为该库选择的 HTML——我还想要 div 和 p 的信息...我该怎么做？我更喜欢 jquery，但纯 javascript 或任何其他库对我来说也可以...

我需要你关于 rangy 图书馆的帮助。

如何在 iframe 选定的内容中应用 rangy，我无法理解（（

我页面中的此代码使用所有 iframe 内容创建红色粗体选择，但我需要将其仅应用于用户选择

我正在使用 Rangy 在富文本编辑器中执行多项操作（设计模式 =“on”）。其中一项功能是粘贴格式化内容，这些内容可以表示用户事先创建的某些预定义字符。所有文本内容都保存在段落元素中。用户可以从这个开始：

其中竖线 (|) 是插入符号的位置。然后，他们选择通过编辑器上的按钮粘贴其中一个“特殊”字符，最终得到以下结果：

该操作在幕后使用 Rangy 在内部粘贴过程中保持插入符号 (SelectionSaveRestoreModule) 的位置，这可能是在编辑器中对文本进行后粘贴处理，否则可能会弄乱光标的位置。

但是，在 IE8 中，插入符号不能放在之后，<span>因为似乎存在一个错误，使其位置无效。结果光标出现在<span>元素之前，甚至无法使用键盘光标控件将光标移动到跨度之后。事实上，它甚至可以防止光标移动到任何后续段落。

最近几天我尝试了几种技术，包括在<span>s 之后放置额外的字符并取得了一些成功。然而，这些额外的字符在出现时显然会给用户造成混淆并且并不理想。使用零宽度空间在视觉上更好，但在粘贴操作后尝试整理它们会导致问题。

我需要一种“整洁”的方法来支持用户对特殊字符的要求，我自由地接受我可能以错误的方式处理这个问题。

我正在使用 Rangy 来选择和恢复光标位置。

它做得很好，但它并不是为以编程方式操作用户输入并且在 DIV 的 innerHTML 中替换较短的字符串时设计的。

我在 jsbin 上创建了一个示例，显示了当用户在选择结束时键入一个空格并以编程方式删除该空格时会发生什么：http: //jsbin.com/ebeqoj/4/edit

替换的 innerHTML 比 Rangy 尝试恢复的要短，因此它失败并且 DIV 失去焦点。

我将不胜感激有关如何处理此问题的建议。例如，有没有办法指示 Rangy 在新字符串的末尾恢复光标？（我试过使用 rangy.getSelection().move("character", userInput2.length-1)但没有成功）

谢谢

下面给出了一个示例 HTML 页面片段---

现在这里有几个场景，包含上面文本的网页显示在浏览器中，用户选择浏览器中显示的一些文本--

情景一——

用户选择文本

在网页中

情景2——

用户选择文本

在网页中。

场景 3-- 用户选择以下文本 Text 1 Text 1_1 Text 1_2 Text 2

场景 4——用户选择以下文本

现在我想使用 Javascript 获取最顶层的节点，其全部内容已被用户选择。这是场景 1 中的单个 div，即。“div1_1”，场景 2 即。“div1”和场景 3 即。“maindiv”，但在场景 4 中，选择了 div1_2 的全部内容以及 div2 的全部内容——即内容已被选择的这 2 个 div 不是兄弟姐妹。所以我想为场景 4 提取的结果是“div1_2”和“div2”。

如上所述，如何提取 div？我在这里提到了 rangy 的使用，因为它非常有用，并且具有超出标准 JS DOM 的一些功能，但我愿意使用任何其他 JS 库，如 JQuery，甚至纯 Javascript。

我想在这里添加/询问的另一件事......即使有更多图像，任何 div 中有更多链接，并且用户的选择包括这些图像/链接，那么我将如何提取最上面的 div，这样这个 div 的文本内容等于用户选择的文本（图像可以被忽略，链接的文本只有用户选择了常规文本）？

我有一个像

现在我正在选择“测试”并单击页面中的斜体按钮，它会创建一个新元素<span class="ItalicClass">和它surroundContents()。这炒得很好。

现在我有文字

现在，如果我选择“测试”，它会做同样的事情，但我想先关闭父元素，然后插入新元素。我知道因此我可以在元素parentNode中插入一个新类。span同样，我需要在新元素结束后打开同一个父级。最后一行应该是

如果我选择“更多”这个词，那么

感谢这方面的任何指示。

问候多米尼克

我正在尝试将类添加到文档中的选定文本。问题是我不希望用户能够选择页面上的所有文本（例如使用 command+A ...）所以我想从一个范围中删除节点，但我不知道如何要做到这一点。这个页面有很多文本/嵌套的 div，所以使用添加的类来检查它是否在一个可选择的元素中会非常耗时/慢。

我做了一个小提琴来解释我想要做得更好的事情。 http://jsfiddle.net/thomasjonas/BhKFt/20/

如果您选择此示例中的所有文本，则该类将添加到所有 div。我希望它只将 css 应用于具有“是”类的 div。有没有一个不错的、非浏览器崩溃的解决方案？

提前致谢！

我正在使用 rangy 并且有一个带有 contenteditable div 的案例，其中可以保存用户选择并稍后恢复，以便可以插入 HTML。

我的问题是，如果用户在标题元素中进行选择，我不希望将 html 插入标题中。

所以我试图弄清楚如何使用 rangy 以便如果在标题中进行选择，那么我可以将它移动到标题元素之前。

因此，如果用户在 h1 中选择：

然后将保存的选择移到 h1 之前：

我尝试了以下方法来查看是否可以移动选择边界：

但是当我在 H1 中选择时，它仍然在 H1 内而不是在它之前设置保存的选择边界。我不确定如何在标题元素之前移动边界。