Annotator.js 从 json 加载注解答案

【问题标题】：Annotator.js load annotations from jsonAnnotator.js 从 json 加载注解
【发布时间】：2016-07-07 20:10:17
【问题描述】：

我正在尝试开发一个需要一些注释的网站。我找到了一个很棒的 js 库 annotator.js，但我似乎无法启动它。

我试图在页面加载时突出显示一些注释，但我似乎无法正确处理。我确实收到一个 JS 错误，说 .slice 不是函数，但无论我如何更改 json 对象，我都无法让它工作。

谁能帮我理解它是如何工作的？我已经阅读了他们的文档，但我似乎无法加载任何内容。

这是我目前所拥有的：

<div id="annon">
    Lorem ipsum
</div>

<script>
var annotator = $('#annon').annotator();
annotator.annotator('loadAnnotations', 
{"rows": 
[{
  "quote": "Lorem",
  "ranges":
      [{
          "endOffset": 5,
          "startOffset": 0,
          "end": "/",
          "start": "/"
      }],
  "text": "Lorem", "id": 1
 }],
,"total": 1}
</script>

【问题讨论】：

标签： javascript json annotations

【解决方案1】：

据我所知，您传递给注释器的对象不正确。你想传入一个注解对象数组（这里的格式：http://docs.annotatorjs.org/en/stable/annotation-format.html）示例：

    var annotator = $('#annon').annotator();
    annotator.annotator('loadAnnotations', [{
        "quote": "Lorem",
        "ranges": [{
            "endOffset": 5,
            "startOffset": 0,
            "end": "/",
            "start": "/"
        }],
        "text": "A comment.",
        "id": 1
    }]);

但是，当我运行它时，注释器会抱怨您在开始/结束范围内设置的 XPath。您必须弄清楚如何正确设置范围以使文本正确突出显示。

【讨论】：

感谢您的回答。我不再收到错误消息。但是，我已将 end 和 start 更改为 '' 并添加了值为 ["testTag"] 的 tags 属性，但 LOREM 字仍然不亮。我需要做一些具体的事情吗？

【解决方案2】：

好吧，我设法让带注释的单词亮起来。我已经在浏览器中进行了测试以使用对象的结构，以便我可以特别纠正 RANGE 属性。这是我的解决方案：

annotator.loadAnnotations([{
"id": "39fc339cf058bd22176771b3e3187329",
"created": "2011-05-24T18:52:08.036814",
"updated": "2011-05-26T12:17:05.012544",
"text": "This is a comment",                
"quote": "Lorem",         
"ranges": 
[{
  "start": "/div[1]",         
  "end": "/div[1]",           
  "startOffset": 17,                    
  "endOffset": 22                     
}]

我遇到的问题是为什么 startOffset 是 17，因为 LOREM 是 div 中的第一个单词。

如果有人能解释一下，那就太好了！

LE 我已经确定了 17-22 的问题。这是 div 中的实际空格，当我将它们放在新行时，我的 IDE 添加了这些空格。

【讨论】：