问题标签 [rangy]

我试图用 chrome 的“纯文本”行为创建一个 contenteditable div。因此，用户只能输入纯文本，并且在复制富文本时将其粘贴为纯文本。在我的脚本中，@-提及被转换为按钮并使用 Rangy.js 添加

在正常的 contenteditable div 中，可以粘贴富文本，我需要将其转换为普通文本。唯一的问题是检测粘贴的内容，然后将其转换为文本并将其插入到正确的位置，然后恢复胡萝卜位置。当在更多行上选择更多文本时，就更难了。

我认为很难，有没有更简单的解决方案？或者任何人都可以推荐最轻量级的编辑器？

谢谢！

正在选择的 html：

所以，选择的 .toHtml() 是这样的：

但这不在原始文件中。

所以，我想做的是扩展选择，使其包含整个 BOLD 标记。

这很容易检测到，因为您只需要进行测试

该文档指出范围广泛的范围有一个setStartBefore(Node)方法：http ://code.google.com/p/rangy/wiki/RangyRange

所以，我得到了当前范围

并尝试 setStartBefore ：

并且由于我在控制台中执行所有这些操作，因此我会立即收到反馈说

什么会导致这种情况，以及我将如何解决它以找到我想要解决的问题的解决方案？

更新：根据 Tim Down 的建议，我尝试了以下方法：
原文：

它应该扩大到包括质量 Ef它不应该吗？

更新 2：

解决方案（根据 Tim Down）

我有以下代码片段将插入符号设置为给定索引index

当我将输入元素添加到 contentEditable 时会出现问题div，我无法再将插入符号始终设置在所需位置。

我想将这些输入视为 div 中的一个位置（好像它们只是一个字符）。

除此之外，我还需要类似的代码来用div我自己的一些文本替换此 contentEditable 中的选择，而且我对 rangy 并不十分熟悉（完全）以了解如何使这项工作......

非常欢迎所有帮助！

这是一个你可以玩弄的小提琴：

http://jsfiddle.net/ee93P/

我在我一直在处理的 Web 应用程序中遇到了一个奇怪的错误，我能够在 Chrome 和 Safari 中重现，但不能在 Firefox 中重现。

要查看错误，请访问www.lastcalc.com并输入一个大写字符。通过 DIV.question 上的“keydown”事件的侦听器（contentEditable 设置为 true 的 DIV），该字符将立即以白色“按钮”css 突出显示。这由 locutus.js 中的 highlightSyntax 函数执行，并依赖 Rangy 库在突出显示期间跟踪光标位置。

到目前为止一切顺利，但现在点击删除。突然在 Safari 中出现以下结构，光标位于中间的 br 元素（视觉上文本居中并获得颜色 #606060）：

在 Chrome 中略有不同：

据我所知，我的代码中没有创建任何这些元素，但它们出现了。在我的代码中唯一提到#606060 颜色的地方是在“white”类的定义中的highlighting.css 中，该类是分配给“span”元素的类，当我按退格键时该元素将被删除。

似乎这里发生了某种浏览器巫术，但不知何故出了问题 - 任何人都可以对此有所了解吗？

附言。如果有人想知道这个网站是什么，您可以在这里找到更多信息。

编辑：经过一些谷歌搜索，这似乎是webkit 中的一个错误，所以现在的问题是：我该如何解决它？

我正在开发一个小型实验性编辑器，我想在其中可视化输入字符之间的时间。因此，我使用 javascript 和 contenteditable div 用 SPAN 和时间戳属性包装每个字符。我在rangy的帮助下构建了一个小函数：

现在我面临着这个概念的两个问题，我希望能得到一些帮助：

一种。使用上述函数，输出以嵌套跨度结束，如下所示：

湾。即使我可以运行上述功能，复制和粘贴或拖放操作也可能以一些嵌套跨度结束......我想知道是否有办法避免这种情况？

谢谢， 安德烈亚斯

这是我想要完成的事情：当用户使用鼠标、键盘或触摸来选择“myDiv”中的文本时，我想获取三个谨慎的 HTML 块：选择之前的 HTML（在它的“左侧” )、选择内部的 HTML 以及选择之后的 HTML（在它的“右侧”）。html 应该与 myDiv.innerHTML 中出现的一样。

选择可能在标记对内开始或结束（即，孤立的选择不一定是有效的 HTML）。我不需要处理选择中的绝对定位元素等特殊情况；我关心的所有选择都将被限制在一个 div 中，该 div 将包含基本标签，如 strong、em、ul、ol、h1、image 和 table。

我最接近的是使用rangy来获取选择并调用selection.getRangeAt(0).cloneContents()以获取选择 HTML。这工作得很好，直到我做出一个单独无效的选择，并且浏览器更改文档片段的 HTML 以使其成为有效标记。

额外信息：这就是我需要这个的原因：

我正在创建一个文档反馈系统，因此我需要将选择信息保存到数据库中以供以后检索和重构。通常我会使用 DOM 路径和选定的文本保存选择，但文本可能会在保存和重构之间发生变化。例如，作者可能会移动整个段落、删除部分等。这样 DOM 路径就变得毫无用处了。

所以我的（不完美的）计划是将选择存储为[偏移量，长度，html_snippet]。这就是“立场”。我还将存储直接出现在所选文本之前和之后的 html 片段。这就是“上下文”。

使用这些数据的组合，我应该能够在大多数情况下重新定位最初选择的文本，即使它已经移动或部分更改。当失败时，用户界面将有办法解决它，但我希望这种情况尽可能少地发生。

非常感谢！

我正在尝试在我的 Google Chrome 扩展程序中使用 Rangy，但我不断收到错误消息“不支持模块 'WrappedSelection'”。这是一个简单的扩展，所以除了 Rangy 之外，我还没有在这个项目中实现任何代码。

有谁知道 Rangy 是否与 Google Chrome 扩展兼容？

我正在尝试在 Chrome 中使用 Rangy，似乎 Chrome 不支持 Serializer 和 WrappedSelection 模块。我不确定我是否没有正确地 init() Rangy，或者我是否犯了其他错误。我运行了 console.log(rangy.modules)，这就是我发现 Serializer 和 WrappedSelection 不受支持的方式。

我创建了一个空的 Chrome 扩展，并在 manifest.js 中包含了 7 个必需的 Rangy js 文件和 jQuery.js。以下是我的 script.js 的内容：

我编写了一个简单的测试来更改可编辑 div 内容中的文本。html结构已更改，但文本相同。

我试过这样的范围：

但是它报错：

异常警告：模块 SaveRestore：标记元素已被删除。无法恢复选择。

rangy 是否支持我上面提到的功能？如果是，我应该如何使用它？如果没有，我应该怎么做才能实现它？

更新：在我的场景中，我必须替换所有的 innerHTML，因为文本将被格式化为非常丰富的样式。但在我的情况下，没有样式的文本总是相同的。这是记录选择和插入符号位置并将其重新设置的任何可能方式吗？我应该使用什么样的 API？

我正在开发一个在 WebKit 中显示静态 HTML 并允许用户选择和突出显示文本的查看器应用程序。

我的方法是保持静态 HTML 文档完整，并将高亮部分保存在单独的位置。Rangy非常适合序列化选择，以便在应用程序再次启动时可以存储和重新应用它们。

但是，使用 CSS Class Applier Rangy 扩展来标记突出显示的部分，会更改文档的 DOM 结构，从而使所有先前序列化的范围无效。

是否可以在不更改 DOM 结构的情况下将 CSS 类应用于用户选择？

非常感谢！