Hier ist, was ich zu erreichen versuche: Wenn ein Benutzer eine Maus, eine Tastatur oder eine Berührung verwendet, um Text innerhalb von "myDiv" auszuwählen, möchte ich drei diskrete Teile von HTML erhalten: das HTML vor der Auswahl (nach "links "davon"), der HTML-Code innerhalb der Auswahl und der HTML-Code nach der Auswahl (rechts davon). Das HTML sollte so aussehen, wie es mit myDiv.innerHTML aussehen würde.
Die Auswahl kann innerhalb eines Tag-Paares beginnen oder enden (d. h. die isolierte Auswahl ist nicht notwendigerweise HTML-gültig). Ich muss mich nicht mit speziellen Szenarien wie absolut positionierten Elementen in der Auswahl beschäftigen. Alle Auswahlen, die ich betrachte, sind auf ein div beschränkt, das grundlegende Tags wie strong, em, ul, ol, h1, image und table enthält.
Am nächsten komme ich rangy , um die Auswahl zu erfassen und selection.getRangeAt(0).cloneContents() aufzurufen, um die Auswahl zu erhalten HTML. Dies funktioniert gut genug, bis ich eine Auswahl getroffen habe, die für sich allein ungültig ist, und der Browser ändert den HTML-Code des Dokumentfragments, um ein gültiges Markup zu erstellen.
Zusätzliche Informationen: Hier ist, warum ich das brauche:
Ich erstelle ein Dokumentenfeedbacksystem, also muss ich die Auswahlinformationen in einer Datenbank speichern, um sie später wiederzufinden und wiederherzustellen. Normalerweise würde ich die Auswahl unter Verwendung des DOM-Pfades und des ausgewählten Textes speichern, aber der Text könnte zwischen Speichern und Wiederherstellen wechseln. Zum Beispiel könnte der Autor ganze Absätze verschieben, Abschnitte löschen usw. Der DOM-Pfad wird dann ziemlich nutzlos.
Also mein (unvollkommener) Plan ist, die Auswahl als [Offset, Länge, html_snippet] zu speichern. Das ist die "Position". Ich werde auch die HTML-Snippets speichern, die direkt vor und nach dem ausgewählten Text kamen. Dies ist der "Kontext".
Bei einer Kombination dieser Daten sollte es mir möglich sein, den ursprünglich ausgewählten Text die meiste Zeit zu verschieben, auch wenn er verschoben oder teilweise geändert wurde. Wenn dies fehlschlägt, wird die Benutzeroberfläche eine Möglichkeit haben, dies zu beheben, aber ich möchte, dass dies so selten wie möglich geschieht.
Superthanks!
Ich habe mehrere Fragen:
1.- Wenn Sie "die HTML nach der Auswahl" sagen - wie würde dieser HTML anders sein als der HTML vor der Auswahl oder umgekehrt? Ist der 'selection' Prozess selbst manipulierend mit dem html wegen deines 'Skripts' oder was auch immer?
2.- Sie sagten, dass die Textauswahl nicht in Textareas stattfindet ... mit welchen Elementen arbeiten Sie dann? Absätze? divs ...? Eine Eingrenzung würde helfen.
3.- Haben Sie über die Verwendung von jquery nachgedacht?
Mache etwas wie
%Vor%Auswahl kopieren:
Wie hier angemerkt:
Text in einem Element auswählen (ähnlich wie mit der Maus markieren)
Jason hat folgende Funktion geschrieben:
%Vor%Mit einer Live-Demo, die hier zu finden ist: Ссылка
Und eine jquery-Plugin-Version hier: Ссылка
Was Sie für die Erlangung des ausgewählten Textes verwenden können. Sie müssen es nur entsprechend anpassen, da er sich aus einem umgekehrten Winkel nähert. Je mehr Details Sie uns geben können, desto besser können wir Ihnen helfen.
Hoffe, das hilft
G
Dieser Code erhält HTML / Text aus der Benutzerauswahl, aber er funktioniert nur in IE. Der Code funktioniert auch mit der Auswahl von Kreuztags. (Globals pflegte den Code kurz zu halten.)
%Vor% Inhalt vor und nach der Auswahl in thediv erhalten Sie so: prepost=thediv.innerHTML/innerText.split(rangeText);
Wenn die Seite andere Elemente als thediv enthält, müssen sie nicht auswählbar gemacht werden.
Tags und Links javascript html rangy