Javascript, annotazioni di testo e idee

Question

Javascript, annotazioni di testo e idee

#1 da (2 voti)
#2 da (0 voti)
#3 da (0 voti)

7

Sono molto curioso di sentire il contributo degli altri su un problema che sto contemplando da tempo.

In sostanza, vorrei presentare un utente con un documento di testo e consentirgli di effettuare selezioni di testo e annotarlo. Specifico per le annotazioni cerco di raggiungere il seguente:

Permetti agli utenti di fare una selezione di testo, annotarla, quindi salvare la selezione e l'annotazione per riferimento più tardi
(UI) Supporto che rappresenta annotazioni sovrapposte. Ad esempio se la stringa in cui: "Questa è la frase di test per la mia frase di prova di esempio", user1 potrebbe avere un'annotazione su "è la frase di prova per il mio esempio" e user2 potrebbe avere un'annotazione su "per il mio esempio".
Tieni conto di situazioni in cui il testo del documento cambia. Le annotazioni dovrebbero essere aggiornate, se possibile.

Come affronteresti questo da un punto di vista tecnico?

Alcune idee che ho avuto sono:

Utilizza intervalli javascript e memorizza un'annotazione come una coppia di numeri interi come: (document_start_char, document_end_char). Salva questa coppia nel db.
In alternativa, utilizzando JS ottieni il testo selezionato e in realtà salva il testo completo nel db. (non sono sicuro di come farei le annotazioni sovrapposte)
Rappresenta le annotazioni sovrapposte applicando uno stile css per evidenziare il testo, quindi scurisci lo "stack" di annotazioni in cui si sovrappongono. La più piccola annotazione dovrebbe sempre essere in cima allo "stack".

Quali sono i tuoi pensieri o aree di miglioramento? Come diamine potrei supportare il testo di un documento in fase di aggiornamento senza rompere tutte le annotazioni?

design web-development javascript user-interface document

posta Mario Zigliotto 04.07.2011 - 20:13

fonte

3 risposte

Leggi altre domande sui tag design web-development javascript user-interface document

Metodi funzionali sulle collezioni Perché un div contenteditable non si comporta come un elemento di input?

score 2 · Answer 1

Potresti dare un'occhiata a Open Knowledge Foundation Annotator [ link ] per l'ispirazione, libreria javascript (GPL o MIT ) + couchdb backend ... c'è anche co-ment.org, marginalia che fa ciò che descrivi penso

@trevor - Rangy [ link ] - una gamma di JavaScript e una libreria di selezione cross-browser - può risolvere il problema di selezione dell'intervallo IE - C'è anche un modulo di posizione (x, y) in sviluppo nelle demo.

score 0 · Answer 2

Ecco un codice per iniziare:

if (window.getSelection) {
    t = window.getSelection().toString();
} else if (document.getSelection) {
    t = document.getSelection().toString();
} else if (document.selection) {
    t = document.selection.createRange().text.toString();
}

Metti questo in un evento mouseup e puoi ottenere il testo per qualsiasi cosa sia stata selezionata. Il problema che ho avuto in passato è che mentre è possibile ottenere il testo selezionato, non è possibile ottenere la "posizione" del testo in IE o il nodo in cui si trova il testo. Da < a href="http://www.quirksmode.org/dom/range_intro.html"> quirksmode :

The Microsoft Text Range object is profoundly different from the other two, because it's string-based. In fact, it is extremely hard to jump from the string contained by Text Range to a DOM node.

Mi sono aggirato facendo di ogni frase un tag diverso e catturando ciò su cui si verificano gli eventi mouse-up e mouse-down. Quindi cerco il testo che hanno selezionato all'interno di questi intervalli. È un hack ma ha funzionato bene per me. Dove non funziona è dove gli utenti selezionano una parola o una serie di parole che si verificano più volte all'interno di un intervallo. Quindi immagino che potresti fare un intervallo su ogni parola.

Non ho lavorato a questo problema per forse un anno, quindi le cose potrebbero essere cambiate e forse la mia soluzione non è la migliore.

Sembra che ci siano anche delle buone idee qui:

link

Per quanto riguarda la sovrapposizione, probabilmente vorrai avere una sorta di marcatore che mostri annotazioni sovrapposte. L'utente può fare clic o passare il puntatore del mouse e vedere le due annotazioni.

score 0 · Answer 3

Lavorando personalmente su me stesso e usando l'Annotator OKFN menzionato sopra. Non è banale farlo correttamente, e Annotator ha ragione:

link

Per quanto riguarda il problema del testo che cambia: anche non banale. Il ragazzo intelligente del New York Times parla di quel problema in questo post del blog:

link

Buona fortuna.