Annotator.js jsonの読み込み注釈

Question

私はいくつかの注釈が必要なウェブサイトを開発しようとしています。 私は素晴らしいjsライブラリannotator.jsを見つけましたが、私はそれを開始することができないようです。

ページが読み込まれたときに注釈を強調しようとしていますが、正しく表示されないようです。 .sliceは関数ではないというJSエラーを受け取りますが、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

まあ、私は注釈付きの単語を明るくすることができました。 私は、特に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      
}] 

私は問題のundestandingを持っています何startOffsetはLoremのはdiv要素の最初の単語で考えると17である理由です。

誰かがそれを説明できる場合は、それは素晴らしいでしょう！

le 私は17-22の問題を特定しました。それは私のIDEが私が新しい行にそれらを置いたときに追加したdivの実際のスペースでした。

Answer 2

は、あなたが注釈に渡しているオブジェクトが正しくありません。

は、これは私がこれまで持っているものです。あなたは、アノテーションオブジェクトの配列で渡したい（ここ形式：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について不平を言います。テキストを正しく表示させるには、範囲を正しく設定する方法を理解しなければなりません。