Cross Browser Auswahl Bereich Bibliothek?

Kennt irgendjemand von cross browser Benutzer Auswahlbereich Bibliotheken in Javascript geschrieben?Cross Browser Auswahl Bereich Bibliothek?

Ich habe ein paar jQuery-Plugins gefunden, (die sind ehrlich gesagt zu einschränkend und sehr fehlerhaft). Ich habe bereits umgesetzt und bin mit der folgenden einige meiner Tricks ziehen aus:

http://plugins.jquery.com/project/wrapSelection http://perplexed.co.uk/1020_text_selector_jquery_plugin.htm

Und ein paar andere kleine Skripte und so.

Ich möchte nur wissen, was Sie dort herausgefunden haben. Schick mir das nicht nochmal googeln (ich habe tagelang an all dem gearbeitet). Hoffentlich kann dies sein, wo zukünftige Programmierer die Antwort finden können.

Quelle

2010-08-10 UpHelix

Beide Ihrer Links 'http: //plugins.jquery. com/project/wrapSelection und http: // perplexed.co.uk/1020_text_selector_jquery_plugin.htm funktioniert nicht mehr. Können Sie sie aktualisieren? – John

aktualisieren Sie Ihre Links, bitte – Anthony

Ich habe eine Cross-Browser-Bereich und Auswahlbibliothek namens Rangy entwickelt. Ihr Kern ist dem Konzept von IERange nicht unähnlich, geht aber bei der Implementierung der DOM Level 2 Range- und HTML5-Auswahlspezifikationen sowie hinsichtlich der Stabilität und der Problemumgehung für Browser-Bugs darüber hinaus. Ich denke, es ist das Beste, was es da draußen gibt.

Es gibt auch zusätzliche Module zum Speichern, Wiederherstellen und Serialisieren von Auswahlen und Anwenden der CSS-Klasse auf Bereiche und Auswahlen.

https://github.com/timdown/rangy

Im Folgenden verwendet einige Rangy Erweiterungen Bereiche auf einfache Weise innerhalb eines Auswahltextknoten durchlaufen und umgeben jeden:

function surroundSelectedText(templateElement){ 
    var range, sel = rangy.getSelection(); 
    var ranges = sel.getAllRanges(); 
    var textNodes, textNode, el, i, len, j, jLen; 
    for (i = 0, len = ranges.length; i < len; ++i) { 
     range = ranges[i]; 
     // If one or both of the range boundaries falls in the middle 
     // of a text node, the following line splits the text node at the 
     // boundary 
     range.splitBoundaries(); 

     // The first parameter below is an array of valid nodeTypes 
     // (in this case, text nodes only) 
     textNodes = range.getNodes([3]); 

     for (j = 0, jLen = textNodes.length; j < jLen; ++j) { 
      textNode = textNodes[j]; 
      el = templateElement.cloneNode(false); 
      textNode.parentNode.insertBefore(el, textNode); 
      el.appendChild(textNode); 
     } 
    } 
} 

var span = document.createElement("span"); 
span.style.color = "green"; 
span.style.fontWeight = "bold"; 

surroundSelectedText(span);

Quelle

2010-08-11 15:56:48

Wunderbar! Ich werde mal schauen. – UpHelix

Sobald Sie Unterstützung für das Umhüllen von Bereichen mit Spannen haben, wird dieses (nach meinem Wissen) Feature abgeschlossen sein. Posten Sie zurück, wenn Sie diesen Teil des Codes freigeben. Leider muss ich das innerhalb eines Tages behoben haben. – UpHelix

Wird später ein Beispiel veröffentlichen ... –

Für allgemeine Bereichsarbeiten (im Gegensatz zur Verarbeitung von Eingabe-/Textbereichsauswahl) ierange in Betracht ziehen. Versuche, das Standardmodell DOM Level 2 Range zu implementieren, das von anderen Browsern in IE unterstützt wird. Art von Arbeiten.

Quelle

2010-08-10 23:18:32 bobince

Eines der wichtigsten Features, die ich brauche, ist eine Auswahl mit einer Spanne zu umgeben. Dieser Code kann das, aber es behandelt nicht das Umbrechen eines Bereichs um eine Auswahl, die andere Endtags überlappt. – UpHelix

Nun, so etwas wäre natürlich unmöglich! Ein Bereich muss wie jedes Element einen einzelnen übergeordneten Bereich haben. Wenn Sie einer Textzeile, deren Endpunkte nicht innerhalb des gleichen Elements liegen, eine Markierung hinzufügen möchten, müssen Sie jedes Element der Auswahl durchlaufen und ein separates "" -Element um jedes Element hinzufügen, dessen Elternteil nicht vollständig darin enthalten ist die Auswahl. (Oder Sie können es einfach tun, indem Sie jeden Nicht-Leerraum-Textknoten zwischen den Endpunkten einschließen.) – bobince

Ich habe einen Weg zur Implementierung eines Features in Rangy (siehe meine Antwort) genommen, der Formatierung auf eine Auswahl anwenden wird, indem jeder Textknoten darin eingeschlossen wird die Auswahl mit einer Spannweite, wobei auch benachbarte identische Spannweiten entfernt und zusammengeführt werden. Ich hoffe, das in ein paar Wochen zu veröffentlichen. –

Für die jQuery-Plugin-Option gibt es jCaret, können Sie die homepage here und die examples here überprüfen.

Ich habe dies für ein paar Projekte für verschiedene Anwendungen verwendet, funktioniert gut beim Entfernen der browserübergreifenden Inkonsistenzen.

Quelle

2010-08-11 00:53:30

Sieht gut aus, funktioniert aber nur in Eingängen und Textbereichen. Ich habe daran gearbeitet, es in ein beliebiges Element umzuwandeln, aber noch keine Würfel.Eine der Haupteigenschaften ist, dass ich Umbrüche (und jedes andere Element, das ich spezifiziere) um eine Benutzerauswahl wickeln muss. Der wrapSelection-Code (http://plugins.jquery.com/project/wrapSelection) funktioniert perfekt und ich habe ihn für meine Bedürfnisse modifiziert, der Code funktioniert jedoch aus irgendeinem Grund nicht in IE8, obwohl er Unterstützung für IE. – UpHelix

Links funktioniert nicht. – John

Cross Browser Auswahl Bereich Bibliothek?

Antwort

Verwandte Themen