问题标签 [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.

0 投票
4 回答
7322 浏览

javascript - 删除 contenteditable 中选择内的所有 HTML 标记

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

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

示例 1:

选择:

会成为:

示例 2:

选择:

会成为:

你明白了……

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

0 投票
1 回答
1685 浏览

javascript - 如何在 mousedown 事件之前获取 selection.range?

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

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

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

看看这个小提琴


重现问题的步骤(参见控制台):

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

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

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

0 投票
3 回答
2773 浏览

javascript - 使用 execCommand 设置锚点名称

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

这将导致

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

谁能帮我?

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

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

0 投票
2 回答
930 浏览

javascript - Rangy 错误:deserializeRange:页面加载后序列化范围根节点的校验和不匹配

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

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

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

0 投票
1 回答
1193 浏览

javascript - Rangy:如何使用动态 elementProperties 创建 CssClassApplier

我的代码:

但是当我打电话时

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

0 投票
1 回答
417 浏览

javascript - 如何通过rangy选择img,object tag...?

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

我的代码

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

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

0 投票
1 回答
230 浏览

javascript - Rangy功能亮点选型表现

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

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

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

0 投票
0 回答
380 浏览

html - Rangy - selectNode() - 不同浏览器中的不同行为?

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

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

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

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

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

0 投票
1 回答
1282 浏览

javascript - 使用 Rangy 从 db 恢复多个选择

我想做的事 :

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

我做了什么 :

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

问题 :

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

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

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

创建了一个 JS-Fiddledemo / 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 调用,并从我的数据库中获取此页面的所有(序列化)用户选择,然后遍历它们并进行反序列化。

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

0 投票
2 回答
1965 浏览

javascript - Rangy:如何获取使用 Highlighter 模块创建的 span 元素?

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

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

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

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

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