JS: Erhalte Array aller ausgewählten Knoten in contentEditable div

8

Hi Ich arbeite seit einiger Zeit mit contentEditable, und ich denke, dass ich mich ziemlich gut damit beschäftige. Eine Sache, die mir ausweicht, ist, wie man ein Array von Referenzen auf alle Knoten bekommt, die teilweise oder vollständig innerhalb der Auswahl des Benutzers liegen. Hat jemand eine Idee?

Hier ist was los:

%Vor%     
cronoklee 16.10.2011, 02:30
quelle

3 Antworten

21

Hier ist eine Version, die Ihnen die tatsächlich ausgewählten und teilweise ausgewählten Knoten und nicht die Klone anzeigt. Alternativ könntest du meine Rangy -Bibliothek verwenden, die eine getNodes() -Methode ihrer Range-Objekte hat und in IE & lt; arbeitet. 9.

%Vor%     
Tim Down 16.10.2011, 12:14
quelle
1

Du bist so nah dran! Wenn Sie Document Fragment an das temporäre Element span anhängen, haben Sie sie in eine verwaltbare Gruppe umgewandelt, auf die Sie über das vertrauenswürdige childNodes -Array zugreifen können.

%Vor%

Darüber hinaus bereiten Sie sich mit der for(i in selnodes) -Schleife, die die Elemente im Array zurückgibt, PLUS der Eigenschaft length und der __proto__ -Eigenschaft Probleme und alle anderen Eigenschaften, die das Objekt haben kann.

Sie sollten diese Arten von for -Schleifen nur verwenden, wenn Sie die Eigenschaften in einem Objekt durchlaufen, und dann immer mit if (obj.hasOwnProperty[i]) , um vom Prototyp geerbte Eigenschaften herauszufiltern.

Verwenden Sie beim Durchschleifen von Arrays:

%Vor%

Wenn Sie schließlich dieses Array geladen haben, müssen Sie jedes Element überprüfen, um zu sehen, ob es sich um einen DOM-Knoten oder einen Text-Knoten handelt, bevor Sie damit umgehen können. Das können wir tun, indem wir prüfen, ob es die Eigenschaft tagName unterstützt.

%Vor%

Hier ist die ganze Sache:

%Vor%     
Daniel Mendel 16.10.2011 03:28
quelle
0

Below Code ist ein Beispiel, um Ihr Problem zu lösen, unterhalb von code geben Sie alle ausgewählten Knoten im Bereich

zurück %Vor%     
payam jabbari 04.03.2014 12:40
quelle

Tags und Links