2015-05-25 10 views
5

Chciałbym podświetlić zakres tekstu ze strony html i uzyskać podświetloną pozycję, aby następnie użyć do przechowywania komentarzy.Przechowywanie informacji o zaznaczeniu tekstu w przeglądarce

Mój problem

Mam na stronie artykułu, który pozwala użytkownikowi na wybór podświetlić tekst i dodać komentarz. Mam to do punktu, w którym mogę umieścić pole interfejsu użytkownika na prawo od zaznaczonego tekstu, aby wprowadzić komentarz (pomyśl o google docs).

Potrzebuję przechowywać informacje o zaznaczonym tekście, aby móc je połączyć z dowolnymi komentarzami. Idealnie byłoby po prostu zapisać wybrany tekst, a następnie zeskanować zawartość dla tego wyboru. Ma to poważną wadę: co się stanie, jeśli dwie lub więcej kopii tego samego wyboru tekstu wystąpi w treści.

Sama treść jest przechowywana w formacie HTML w DB.

Na przykład podświetlony został wybór poniższego akapitu (pogrubiony wybór). Muszę do przechowywania informacji o wyborze, aby móc odnaleźć go w przyszłości.

„Skutecznie zrewolucjonizuje interoperacyjne kapitał ludzki poprzez nisz wirusowych Holisticly wykorzystać potencjalne możliwości światowej klasy przez społeczności na całym świecie Obiektywnie objąć multidyscyplinarnych nisze do siebie równoległe. paradygmaty.

Co robiłem dotychczas

Używanie getBoundingClientRect() zaznaczenia tekstu range można uzyskać odległość od górnej części strony. Chociaż przydatne do pozycjonowania pola komentarza interfejsu użytkownika nie sądzę, że to pomoże mi połączyć komentarze do ich zaznaczonego tekstu.

Mogę pobrać zaznaczony tekst z window.getSelection(), ale może być wiele wystąpień.

NIE chciałbym modyfikować zawartości. tj. zawijam zaznaczenie w span lub podobnym, jeśli mogę pomóc, tak jakby komentarz został usunięty, może to być trudne do usunięcia znaczników.

Odpowiedz

0

Najlepszym rozwiązaniem byłoby umieszczenie komentarzy w przesunięciach w tekście (tj. Znak # 100 na znak nr 150).

Będziesz musiał rozwiązać różnice, kiedy ludzie edytują twój dokument (a jeśli nie, tym lepiej!), Więc jeśli ktoś doda 10 znaków przed częścią, w której został umieszczony komentarz, komentarz wskazuje teraz do 110-160.

+0

Jedyny problem z tą metodą polega na tym, że 'startOffset' i' endOffset' z zakresu są częścią sekcji. tj. akapit będzie sekcją, ale także jeśli akapit zawiera łącze pośrodku, dzieli ten akapit na dwie sekcje, więc 'startOffset' może być 0, ale z 2. sekcji drugiego akapitu. Chociaż nie ma sposobu, aby dowiedzieć się, które sekcje. – iamjonesy

+0

Użyj całego tekstu jako względnego punktu. Zignoruj ​​sekcje. –

+0

Wygląda na to, że przesunięcia pod warunkiem, że 'getRangeAt (0)' odnoszą się do 'sekcji', a nie do całego tekstu. Jeśli podkreślę pierwsze słowo drugiego akapitu, "startOffset" to 0. – iamjonesy

0

window.getSelection daje obiekt o wiele więcej niż tylko tekst. Możesz przechowywać cały obiekt, będziesz miał prawie wszystkie potrzebne informacje. https://developer.mozilla.org/en-US/docs/Web/API/Selection

Normalnie anchorNode (na której można zastosować parentNode zdobyć punkt, w którym wybór został rozpoczęty) i startOffset powinna być unikalna dla wszystkich swoich wyborów i można kierować dokładnie te znaki, które zostały wybrane bez opierając się na tekście zadowolony.

Powiązane problemy