问题标签 [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 中选择内的所有 HTML 标记
我有一个<div />
它contenteditable
可以包含多种类型的 HTML 元素,例如<span />
、<a />
、<b />
等<u />
。
现在,当我在我的文本中选择文本时,我contenteditable
希望有一个按钮来删除选择中的所有样式。
示例 1:
选择:
会成为:
示例 2:
选择:
会成为:
你明白了……
我发现这个有用的功能https://stackoverflow.com/a/3997896/1503476用自定义文本替换当前选择。但我只是无法先获取选择的内容,然后在替换之前去掉标签。我怎样才能做到这一点?
javascript - 如何在 mousedown 事件之前获取 selection.range?
我不明白为什么我不能得到正确的范围对象。我很难解释这个问题。
例如:我有五个 div,每个 div 包含一个短语。从逻辑上讲,如果我在其中一个 div 中触发mousedown
事件,我可以获得事件目标。好的,这是初级的。
但是,如果我在事件上使用范围对象mousedown
,则事件目标始终是我单击的,但range.startContainer
指向前一个 div;
看看这个小提琴:
重现问题的步骤(参见控制台):
- 在第一行按住鼠标按钮(控制台说“未定义” [*])
- 释放鼠标按钮(范围现在安全地指向第一行)
- 在第四行按住鼠标按钮(控制台说“第一行”)
- 控制台显示上一个单击的行
[*] 未定义,因为文档还没有范围,但这无关紧要,因为我可以即时创建一个并将他注入到文档中。
我可以推断出 mousedown 事件是在范围之前执行的。或者不是?
javascript - 使用 execCommand 设置锚点名称
我知道如何使用这样的属性设置<a />
标签:href
contenteditable
这将导致
但是我无法弄清楚如何设置锚点name
而不是href
.
这是我想要的结果:
谁能帮我?
旁注:我使用 jQuery 和 Rangy 作为库,但是我更喜欢直接与 execCommand 一起使用的解决方案。
更新:这是一个 jsfiddle: http: //jsfiddle.net/fjYHr/选择一些文本并单击按钮。我想要的是,单击按钮会插入一个链接,其中设置了名称属性而不是 href。
javascript - Rangy 错误:deserializeRange:页面加载后序列化范围根节点的校验和不匹配
我正在通过我的动态网页上的 rangy 保存选择。但是当我重新加载页面并恢复选择时,我收到以下错误:
错误:deserializeRange:序列化范围根节点 (f3909155) 和目标根节点 (c21b08a9) 的校验和不匹配
页面源根本没有改变,所有的 HTML 都是一样的。我正在使用 Tikiwiki CMS。有什么想法吗?
javascript - Rangy:如何使用动态 elementProperties 创建 CssClassApplier
我的代码:
但是当我打电话时
它总是呈现具有相同 id 属性的跨度,我如何设置 id 属性动态?
javascript - 如何通过rangy选择img,object tag...?
我使用rangy突出显示选择文本(它用 span 标签包装选择文本)。但是当我选择文本和图像时,它会生成一个跨度标签,但跨度不能包装 img 标签。它附加在 img 标签之前。
我的代码
我将 elementTagName 更改为 div 但没有更改。
那么,如何包装 img 或 object 标签或 input 标签。通过高亮元素 by rangy?
javascript - Rangy功能亮点选型表现
为什么用函数highlighter.highlightSelection
(marktype)做的注解数量越来越多时,rangy会变得更加迟钝?一开始性能非常好,但随着注释的增加而降低。
那么,我该怎么做才能提高功能的性能highlighter.highlightSelection()
呢?因为当我选择了我的 html 的许多不同部分时,性能会呈指数级下降。如果您选择很长的 html 片段,则性能将最差。我试图解决这个问题,但我不知道如何解决。
有谁知道为什么会发生这种情况?
html - Rangy - selectNode() - 不同浏览器中的不同行为?
我正在与 rangy 合作,并遇到了一个与选择及其跨浏览器行为有关的问题。
我在 div 中有一些元素(例如超链接),我希望能够在单击该元素内部时选择outerHTML 。
因此,我尝试range.selectNode()
并期望选择整个节点,以便selection.toHtml()
为我提供超链接的 outerHTML。要获得 innerHTML 我会调用range.selectNodeContents()
. 这就是它在 IE 9 中的工作方式。
但在 Chrome 中,在这两种情况下都只选择了 innerHTML。rangy 插件(应该是跨浏览器)中是否存在错误,或者我做错了什么?
检查这个小提琴,看看我的意思。首先在 IE 9 中打开它,将插入符号放在超链接内,然后单击第一个按钮(检查输出selection.toHtml()
)。然后再次将插入符号放在超链接内并单击第二个按钮(再次检查输出)。之后在 Chrome 中执行相同的操作。
javascript - 使用 Rangy 从 db 恢复多个选择
我想做的事 :
-> 向用户显示纯 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 调用,并从我的数据库中获取此页面的所有(序列化)用户选择,然后遍历它们并进行反序列化。
任何帮助将非常感激。谢谢你。
javascript - Rangy:如何获取使用 Highlighter 模块创建的 span 元素?
我正在使用 Rangy 中提供的荧光笔模块,它在为所选文本创建高亮显示时效果很好。
在对 html 的更改方面,选定的文本将替换为 span 标签,例如如下所示:
我想要做的是在创建 span 元素后获取它的引用,这样我就可以用它做一些其他的事情。如何才能做到这一点?
请注意,其他地方可能有其他带或不带高亮标签的跨度,因此无法使用这些跨度找到它。
我必须为所选文本创建突出显示的代码的重要部分是: