Szukam rozwiązania, które działa w przeglądarce, np. IE, Firefox i Safari.Jak mogę znaleźć węzeł DOM przy kursie w edytowalnym oknie zawartości przeglądarki przy użyciu Javascript?
9
A
Odpowiedz
17
Przez "okno edycji zawartości" zakładam, że masz na myśli element z włączoną contenteditable
lub dokument z włączoną designMode
.
Istnieją również dwa przypadki do rozważenia: przypadek, w którym użytkownik dokonał selekcji i przypadek, w którym znajduje się tylko karetka. Poniższy kod zadziała w obu przypadkach i da ci najbardziej kompletny element, który całkowicie zawiera zaznaczenie. Jeśli wybór jest całkowicie zawarty w węźle tekstowym, to jest trochę skomplikowane, aby uzyskać ten węzeł tekstowy w IE (trywialny w innych przeglądarkach), więc nie podałem tutaj tego kodu. Jeśli tego potrzebujesz, mogę to wykopać.
function getSelectionContainerElement() {
var range, sel, container;
if (document.selection && document.selection.createRange) {
// IE case
range = document.selection.createRange();
return range.parentElement();
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt) {
if (sel.rangeCount > 0) {
range = sel.getRangeAt(0);
}
} else {
// Old WebKit selection object has no getRangeAt, so
// create a range from other selection properties
range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
// Handle the case when the selection was selected backwards (from the end to the start in the document)
if (range.collapsed !== sel.isCollapsed) {
range.setStart(sel.focusNode, sel.focusOffset);
range.setEnd(sel.anchorNode, sel.anchorOffset);
}
}
if (range) {
container = range.commonAncestorContainer;
// Check if the container is a text node and return its parent if so
return container.nodeType === 3 ? container.parentNode : container;
}
}
}
3
Można również użyć Rangy Biblioteka:
elementAtCursor = rangy.getSelection().anchorNode.parentNode
Powiązane problemy
- 1. Jak znaleźć detektory zdarzeń w węźle DOM przy użyciu JavaScriptu
- 2. Jak załadować plik javascript do DOM przy użyciu selenu?
- 3. jak uzyskać węzeł podrzędny w div przy użyciu javascript
- 4. Jak mogę skomentować węzeł w XML przy użyciu PowerShell?
- 5. Jak mogę dodać węzeł pod węzłem przy użyciu ObjectContentManager?
- 6. Jak mogę sprawdzić, czy obiekt DOM jest poza oknem przy użyciu JavaScript?
- 7. Aktualizacja pliku XML przy użyciu Qt DOM
- 8. Jak odczytać błąd przeglądarki przy użyciu javascript lub angular2?
- 9. Jak emulować przeglądarki przycisk wstecz przy użyciu JavaScript
- 10. jQuery uzyskać węzeł DOM?
- 11. Jak uzyskać szerokość przeglądarki przy użyciu kodu JavaScript?
- 12. Jak skopiować i wkleić węzeł SVG przy użyciu jQuery
- 13. węzeł check XML istnieje lub nie przy użyciu javascript
- 14. Stała pamięć podręczna przeglądarki przy użyciu ServiceWorker
- 15. Dostęp do DOM przy użyciu WebBrowser
- 16. Jak znaleźć różnicę między dwoma datami przy użyciu Javascript
- 17. Jak sprawdzić, czy element istnieje w DOM przy użyciu jQuery?
- 18. Dlaczego nie mogę wymagać (...) w pętli przy użyciu przeglądarki?
- 19. Czy mogę łączyć węzeł @ 6 przy użyciu siły?
- 20. Drukowanie zawartości div przy użyciu Jquery
- 21. Węzeł do analizowania xml przy użyciu xml2js
- 22. Jak znaleźć szerokość elementu div przy użyciu surowego kodu JavaScript?
- 23. Załaduj lokalny obraz do przeglądarki przy użyciu JavaScript?
- 24. Jak umieścić div w centrum przeglądarki przy użyciu CSS?
- 25. Czy mogę odczytać adres URL przeglądarki przy użyciu selenu webdriver?
- 26. Serialize DOM do FileOutputStream przy użyciu Xerces
- 27. Operacje CRUD przy użyciu DynamoDB z expressjs (węzeł js)
- 28. Jak pobrać ostatni węzeł przy użyciu XPath w języku C#?
- 29. Czyszczenie zawartości pliku tekstowego przy użyciu C#
- 30. Jak mogę znaleźć przestrzeń nazw elementu w PHP DOM?
Tim, to jest dokładnie to, czego szukałem. Byłbym wdzięczny, gdybyś mógł zagłębić się w przypadku IE, gdzie wybór jest zawarty w węźle tekstowym. Dzięki. –
Btw, przypadek IE, w którym zwracasz range.parentElement() zawsze wydaje się zwracać element body, nawet jeśli karetka była w tekście wewnątrz węzła zakotwiczenia, np. W tym kodzie HTML xyz, jeśli karetka była pomiędzy słowami "x" i "y", to czy parentElement() nie powinien zwrócić węzła "a"? –
Tak, powinno. Nie miałem wcześniej problemów z 'parentElement()' - czy masz stronę, na którą mogę spojrzeć na problem? –