问题标签 [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.
javascript - 在 contenteditable div 中粘贴时将富文本转换为纯文本
我试图用 chrome 的“纯文本”行为创建一个 contenteditable div。因此,用户只能输入纯文本,并且在复制富文本时将其粘贴为纯文本。在我的脚本中,@-提及被转换为按钮并使用 Rangy.js 添加
在正常的 contenteditable div 中,可以粘贴富文本,我需要将其转换为普通文本。唯一的问题是检测粘贴的内容,然后将其转换为文本并将其插入到正确的位置,然后恢复胡萝卜位置。当在更多行上选择更多文本时,就更难了。
我认为很难,有没有更简单的解决方案?或者任何人都可以推荐最轻量级的编辑器?
谢谢!
javascript - Rangy:如何根据父节点扩展选择?
正在选择的 html:
所以,选择的 .toHtml() 是这样的:
但这不在原始文件中。
所以,我想做的是扩展选择,使其包含整个 BOLD 标记。
这很容易检测到,因为您只需要进行测试
该文档指出范围广泛的范围有一个setStartBefore(Node)
方法:http ://code.google.com/p/rangy/wiki/RangyRange
所以,我得到了当前范围
并尝试 setStartBefore :
并且由于我在控制台中执行所有这些操作,因此我会立即收到反馈说
什么会导致这种情况,以及我将如何解决它以找到我想要解决的问题的解决方案?
更新:根据 Tim Down 的建议,我尝试了以下方法:
原文:
它应该扩大到包括质量 Ef它不应该吗?
更新 2:
解决方案(根据 Tim Down)
jquery - Rangy + ContentEditable + 设置插入符号和替换选择
我有以下代码片段将插入符号设置为给定索引index
当我将输入元素添加到 contentEditable 时会出现问题div
,我无法再将插入符号始终设置在所需位置。
我想将这些输入视为 div 中的一个位置(好像它们只是一个字符)。
除此之外,我还需要类似的代码来用div
我自己的一些文本替换此 contentEditable 中的选择,而且我对 rangy 并不十分熟悉(完全)以了解如何使这项工作......
非常欢迎所有帮助!
这是一个你可以玩弄的小提琴:
javascript - DOM元素莫名出现
我在我一直在处理的 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 - 使用(或不使用)rangy 即时替换 contenteditable 字符
我正在开发一个小型实验性编辑器,我想在其中可视化输入字符之间的时间。因此,我使用 javascript 和 contenteditable div 用 SPAN 和时间戳属性包装每个字符。我在rangy的帮助下构建了一个小函数:
现在我面临着这个概念的两个问题,我希望能得到一些帮助:
一种。使用上述函数,输出以嵌套跨度结束,如下所示:
湾。即使我可以运行上述功能,复制和粘贴或拖放操作也可能以一些嵌套跨度结束......我想知道是否有办法避免这种情况?
谢谢, 安德烈亚斯
javascript - 如何在选择之前、内部和之后获取 HTML(不在 textarea 中)?
这是我想要完成的事情:当用户使用鼠标、键盘或触摸来选择“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 片段。这就是“上下文”。
使用这些数据的组合,我应该能够在大多数情况下重新定位最初选择的文本,即使它已经移动或部分更改。当失败时,用户界面将有办法解决它,但我希望这种情况尽可能少地发生。
非常感谢!
javascript - Rangy - 不支持模块“WrappedSelection”
我正在尝试在我的 Google Chrome 扩展程序中使用 Rangy,但我不断收到错误消息“不支持模块 'WrappedSelection'”。这是一个简单的扩展,所以除了 Rangy 之外,我还没有在这个项目中实现任何代码。
有谁知道 Rangy 是否与 Google Chrome 扩展兼容?
javascript - Chrome 不支持 Rangy 模块?
我正在尝试在 Chrome 中使用 Rangy,似乎 Chrome 不支持 Serializer 和 WrappedSelection 模块。我不确定我是否没有正确地 init() Rangy,或者我是否犯了其他错误。我运行了 console.log(rangy.modules),这就是我发现 Serializer 和 WrappedSelection 不受支持的方式。
我创建了一个空的 Chrome 扩展,并在 manifest.js 中包含了 7 个必需的 Rangy js 文件和 jQuery.js。以下是我的 script.js 的内容:
javascript - 更改可编辑 div 元素的 html 结构时如何恢复选择/插入符号位置?
我编写了一个简单的测试来更改可编辑 div 内容中的文本。html结构已更改,但文本相同。
我试过这样的范围:
但是它报错:
异常警告:模块 SaveRestore:标记元素已被删除。无法恢复选择。
rangy 是否支持我上面提到的功能?如果是,我应该如何使用它?如果没有,我应该怎么做才能实现它?
更新:在我的场景中,我必须替换所有的 innerHTML,因为文本将被格式化为非常丰富的样式。但在我的情况下,没有样式的文本总是相同的。这是记录选择和插入符号位置并将其重新设置的任何可能方式吗?我应该使用什么样的 API?
javascript - 将 CSS 类应用于选择而不破坏 Rangy 中先前序列化的范围?
我正在开发一个在 WebKit 中显示静态 HTML 并允许用户选择和突出显示文本的查看器应用程序。
我的方法是保持静态 HTML 文档完整,并将高亮部分保存在单独的位置。Rangy非常适合序列化选择,以便在应用程序再次启动时可以存储和重新应用它们。
但是,使用 CSS Class Applier Rangy 扩展来标记突出显示的部分,会更改文档的 DOM 结构,从而使所有先前序列化的范围无效。
是否可以在不更改 DOM 结构的情况下将 CSS 类应用于用户选择?
非常感谢!