Annotator.js laden Anmerkungen von JSON

Question

Ich versuche, eine Website zu entwickeln, in der ich einige Anmerkungen benötige. Ich habe eine großartige js-Bibliothek gefunden, annotator.js, aber ich kann nicht in der Lage sein, es zu starten.

Ich versuche, einige Anmerkungen hervorzuheben, wenn die Seite geladen wird, aber ich kann nicht scheinen, es richtig zu machen. Ich bekomme einen JS-Fehler, der sagt, dass .slice keine Funktion ist, aber egal wie ich das Json-Objekt ändere, ich kann es nicht zum Laufen bringen.

Kann mir jemand helfen zu verstehen, wie es funktioniert? Ich habe ihre Dokumentation durchgesehen, aber ich kann anscheinend nichts laden.

das ist was ich bisher habe:

<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

Nun, ich schaffte es, das annotierte Wort zum Leuchten zu bringen. Ich habe Tests im Browser gemacht, um mit der Struktur des Objekts herumzuspielen, so dass ich die RANGE-Eigenschaft im Besonderen korrigieren kann. Dies ist meine Lösung:

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      
}] 

Was ich Probleme undestanding habe ist, warum die startoffset 17 LOREM bedenkt das erste Wort in der div ist.

Wenn jemand das erklären kann, wäre das großartig!

LE Ich habe das Problem mit 17-22 identifiziert. Es waren die tatsächlichen Leerzeichen im div, die meine IDE hinzufügte, als ich sie in eine neue Zeile setzte.

Answer 2

Von dem, was ich sagen kann, das Objekt, das Sie in die annotator falsch ist vorbei sind. Sie wollen (hier Format: http://docs.annotatorjs.org/en/stable/annotation-format.html) in einem Array von Annotation Objekte passieren Beispiel:

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

Jedoch, wenn ich diese laufen, Kommentator beschwert sich über die XPath Sie in den Start/End-Bereich setzen. Sie müssen herausfinden, wie Sie die Bereiche richtig einstellen, damit der Text richtig hervorgehoben wird.