2015-05-25 18 views
5

Vorrei evidenziare un intervallo di testo da una pagina html e ottenere la posizione evidenziata da utilizzare per archiviare i commenti.Memorizza informazioni su una selezione di testo sul browser

Il mio problema

Ho una pagina articolo, che consente all'utente di evidenziare una selezione di testo e aggiungere un commento. Ho raggiunto un punto in cui posso posizionare una casella dell'interfaccia utente a destra del testo selezionato per inserire un commento (si pensi a google docs).

Ho bisogno di memorizzare informazioni sul testo selezionato in modo che possa collegarlo a qualsiasi commento. Idealmente vorrei solo memorizzare il testo selezionato e quindi scansionare il contenuto per quella selezione. Questo ha un grosso difetto: cosa succede se due o più copie della stessa selezione di testo si verificano nel contenuto.

Il contenuto stesso è HTML memorizzato in un DB.

Ad esempio è stata evidenziata una selezione del seguente paragrafo (selezione in grassetto). Ho bisogno di memorizzare le informazioni relative alla selezione per essere in grado di trovare in futuro:.

"efficiente rivoluzionare capitale umano interoperabile tramite nicchie virali Holisticly cogliere le potenzialità di livello mondiale attraverso le comunità in tutto il mondo Oggettivamente abbracciare nicchie multidisciplinari per parallela. paradigmi. Professionalmente. "

Quello che ho fatto finora

Utilizzando la getBoundingClientRect() della selezione di testo range posso ottenere la distanza dalla parte superiore della pagina. Sebbene sia utile per posizionare la finestra di commento dell'interfaccia utente, non penso che questo mi aiuterà a collegare i commenti al testo selezionato.

Posso ottenere il testo selezionato da window.getSelection() ma potrebbero esserci più occorrenze.

Mi piacerebbe NON modificare il contenuto. impacco la selezione in un span o simile se posso aiutarlo come se un commento fosse rimosso, potrebbe essere difficile per loro rimuovere il markup.

risposta

0

La soluzione migliore sarebbe avere i commenti impostati sugli offset nel testo (ad esempio il carattere # 100 e il carattere # 150).

Dovrai risolvere i diff quando le persone modificano il documento (e se non lo fanno, tanto meglio!), Quindi se qualcuno aggiunge 10 caratteri prima della parte in cui è stato inserito il commento, il commento ora punta a 110-160.

+0

L'unico problema con questo metodo è che 'startOffset' e' endOffset' dall'intervallo fanno parte di una sezione. un paragrafo sarà una sezione ma anche se un paragrafo contiene un collegamento nel mezzo allora divide il paragrafo in due sezioni e quindi 'startOffset' potrebbe essere 0 ma dalla seconda sezione del secondo paragrafo. Sebbene non ci sia modo di sapere quali sezioni. – iamjonesy

+0

Utilizza l'intero testo come punto relativo. Ignora le sezioni. –

+0

Sembra che gli offset forniti da 'getRangeAt (0)' siano relativi alla 'sezione' e non all'intero testo. Se evidenzi la prima parola del secondo paragrafo, 'startOffset' è 0. – iamjonesy

0

window.getSelection offre un oggetto con molto più del semplice testo. Potresti immagazzinare l'intero oggetto, avresti praticamente tutte le informazioni di cui hai bisogno. https://developer.mozilla.org/en-US/docs/Web/API/Selection

Normalmente anchorNode (su cui è possibile applicare parentNode per ottenere la sezione in cui la selezione è iniziato) e startOffset dovrebbe essere unico per tutte le selezioni ed è possibile indirizzare esattamente i caratteri che sono stati selezionati senza fare affidamento su testo soddisfare.

Problemi correlati