Question

我正在尝试开发一个网站，其中我需要一些注释。我找到了一个很棒的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>

Answer 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。您必须弄清楚如何正确设置范围以使文本正确突出显示。

Answer 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会添加它。

Annotator.js从json加载注释

2 个答案: