在浏览器上存储关于文本选择的信息

我想突出显示html页面中的一系列文本，并获取突出显示的位置，然后用它来存储注释。在浏览器上存储关于文本选择的信息

我的问题

我有一篇文章页面，允许用户突出显示选定的文本并添加注释。我有它的一个点，我可以在所选文本的右侧放置一个UI框来输入评论（认为谷歌文档）。

我需要存储有关选定文本的信息，以便我可以将其链接到任何评论。理想情况下，我只需存储选定的文本，然后扫描该选择的内容。这存在一个主要缺陷：如果在内容中出现两个或更多相同文本选择的副本。

内容本身是存储在数据库中的HTML。

例如，突出显示了以下段落的选择（粗体选择）。我需要存储关于选择的信息，以便能够找到它的未来：

“有效地通过病毒龛革命性互操作的人力资本通过全球社区Holisticly抓住世界级潜力客观地拥抱多学科龛并行。范式，专业。“

我到目前为止已经

进行使用文本选择range的getBoundingClientRect()我可以从页面顶部的距离。虽然对定位UI评论框很有用，但我不认为这会帮助我将评论链接到他们选定的文本。

我可以从window.getSelection()中获得所选文字，但可能有多处出现。

我想不修改内容。即，如果我可以帮助它，就像将评论移除一样，将选择内容包含在span或类似内容中，但对于他们删除标记可能会很棘手。

来源

2015-05-25 iamjonesy

最好的办法是在你的文本中设置偏移量的注释（即字符＃100到字符＃150）。

当人们编辑您的文档时（如果他们不这样做，一切都会更好！），您必须解决差异问题，所以如果有人在发表评论的部分之前添加了10个字符，到110-160。

来源

2015-05-25 12:18:06

此方法的唯一问题是该范围内的'startOffset'和'endOffset'作为部分的一部分。即一个段落将会是一个段落，但是如果一个段落在中间包含一个链接，那么它将该段落分成两段，所以'startOffset'可以是0，但是从第二段落的第二段落开始。虽然没有办法知道哪些部分。 – iamjonesy

使用整个文本作为相对点。忽略这些部分。 –

它看起来像提供'getRangeAt（0）'偏移是相对于'节'而不是整个文本。如果我突出显示第二段的第一个单词，那么'startOffset'为0. – iamjonesy

window.getSelection为您提供的不仅仅是文本。你可以存储整个对象，你几乎可以获得所有你需要的信息。 https://developer.mozilla.org/en-US/docs/Web/API/Selection

通常anchorNode（您可以申请parentNode获得其中的选择已经开始部分），并开始偏移应该是所有选择独特，可以定位正是那些不依赖于文字被选中的角色内容。

来源

2015-05-25 15:47:18

在浏览器上存储关于文本选择的信息

回答

相关问题