Auswahlbereiche im Webkit (Safari/Chrome)

Question

Ich benutze einen inhalts-editierbaren iframe, um einen Syntax-Highlighter in Javascript zu erstellen, und eines der wichtigsten Dinge ist, Code richtig einrücken zu können.

Der folgende Code funktioniert, wie es sollte in Firefox:

// Create one indent character 
var range = window.getSelection().getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 

Es schafft eine Registerkarte Zeichen und bewegt den Cursor auf die rechte Seite des Charakters. In Chrome und Safari wird ein Zeichen eingefügt, der Cursor bewegt sich jedoch nicht rechts davon.

Ich habe das Range-Objekt sowohl in Chrome als auch in Firefox untersucht und dann festgestellt, dass das Range-Objekt von Firefox viel reicher ist als das von Chrome. Ich konnte keine Spezifikationen des Bereichsobjekts im Webkit finden.

Wie kann ich diesen Code für Webkit und Firefox verwenden?

Vielen Dank!

Answer 1

Sowohl die Range-Objekte von Firefox als auch von WebKit entsprechen vollständig der DOM Range spec. Wenn Firefox mehr Eigenschaften hat, dann sind dies Mozillas eigene Erweiterungen, aber im Allgemeinen bietet die Spezifikation alles, was Sie brauchen könnten.

Wie auch immer, das Problem ist, dass Sie den Bereich nach dem Ändern sie erneut auswählen müssen:

// Create one indent character 
var sel = window.getSelection(); 
var range = sel.getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 
sel.removeAllRanges(); 
sel.addRange(range); 

Beachten Sie, dass dies nicht in frühen Versionen von Safari arbeiten (3 vor Version, glaube ich), weil seine Auswahlobjekt unterstützt getRangeAt nicht. Es gibt einen Workaround dafür, den ich bereitstellen kann, wenn Sie es brauchen.