Javascript: Auswahl zurückgeben (hervorgehobener Text) nach DOM-Manipulation

Question

Diese Funktion gibt Text zurück, den der Benutzer ausgewählt hat, und umschließt ihn in Tags, in diesem Fall in fette Tags.

function makeBold() { 
    var selection = window.getSelection(); 
    var range = selection.getRangeAt(0); 
    var newNode = document.createElement("b"); 
    range.surroundContents(newNode); 
} 

Jetzt, nachdem ich die Funktion aufrufen, die Auswahl (markierten Text) entfernt. Wie gebe ich diese Auswahl zurück oder wie rufe ich die Funktion auf, ohne meine Auswahl zu verlieren?

Answer 1

Die folgende funktioniert:

function makeBold() { 
    var selection = window.getSelection(); 
    if (selection.rangeCount) { 
     var range = selection.getRangeAt(0).cloneRange(); 
     var newNode = document.createElement("b"); 
     range.surroundContents(newNode); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

gibt jedoch mehrere Probleme sind sich bewusst sein:

für jeden Bereich

• Bereich des surroundContents() Methode wird nicht funktionieren: es sinnvoll, innerhalb der machen muss DOM, um den Range-Inhalt in einem neuen Knoten zu umgeben. Wenn Sie beispielsweise surroundContents() in einem Bereich verwenden, der sich über zwei Absätze erstreckt, aber nicht vollständig ausgewählt wird, wird ein Fehler ausgegeben. Siehe die DOM Level 2 Range spec für die formale Definition von diesem.
• IE bis einschließlich Version 8 unterstützt keine DOM Range und hat ein völlig anderes Selection Objekt zu anderen Browsern. IE 9 wird ähnliche Reichweiten- und Auswahlfähigkeiten wie andere Browser haben.
• Sie müssen die Eigenschaft rangeCount der Auswahl überprüfen, bevor Sie fortfahren, andernfalls erhalten Sie eine Ausnahme, wenn keine Auswahl vorhanden ist.