Wie getSelection() innerhalb eines bestimmten div?

Ich habe ein contenteditable div (mit id 'editor1'), das Benutzern die Eingabe von Text ermöglicht. Es gibt dann eine Funktion, die es ihnen erlaubt, jeden hervorgehobenen Text einzufärben. Meine js verwendet window.getSelection().getRangeAt(0), aber das Problem damit ist, dass sie Wörter außerhalb des div markieren können und ihre Farbe ändert sich auch. Bisher; Ich habe versucht:Wie getSelection() innerhalb eines bestimmten div?

 function red(){ 
    {  
     var getText = document.getElementById("editor1").innerHTML; 
     var selection = getText.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    } 
    }

Fiddle: https://jsfiddle.net/xacqzhvq/

Wie man sehen kann, wenn ich hervorheben „dies wird auch rot geworden“, kann ich die Taste verwenden, um auch das rot zu machen. Wie kann ich den markierten Text nur innerhalb des editor1 div einfärben?

Quelle

2016-08-04 cosmo

Welcher Browser ist es? Auf Chrom 51 funktioniert es – avck

Ich weiß, dass die Funktion funktioniert; aber ich möchte nicht, dass etwas außerhalb des div "editor1" auch die Farbe ändern kann. Scrolle in der Geige nach unten. Es gibt eine Textzeile außerhalb der div, die auch mit dem Knopf rot gefärbt werden kann - ich will das nicht; Ich möchte nur, dass jeder Text innerhalb des Divs farbig sein kann. – cosmo

Sie können das Knotenelement aus der Auswahl bekommen .baseNode verwenden. Von dort können Sie den übergeordneten Knoten abrufen und diesen zum Vergleich verwenden.

function red(){ 
    // If it's not the element with an id of "foo" stop the function and return 
    if(window.getSelection().baseNode.parentNode.id != "foo") return; 
    ... 
    // Highlight if it is our div. 
}

Im Beispiel unten ich die div gemacht haben ein id dass Sie sicher, überprüfen zu können, dass Element ist:

Demo

Als @ z0mBi3 erwähnt, dieser Wille arbeite das erste Mal. Aber möglicherweise nicht für viele Highlights (, wenn sie gelöscht werden). Die <span> Elemente innerhalb der div erstellen eine Hierarchie, in der die div die übergeordneten Elemente vieler Elemente span ist. Die Lösung hierfür wäre, dass Sie die Vorfahren des Knotens durchlaufen, bis Sie einen mit der ID "foo" finden.

Zum Glück können Sie jQuery verwenden, die sich mit ihrer .closest() Methode für Sie zu tun:

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is an answer with a native JS implemented method of .closest().

Quelle

2016-08-04 05:17:59

Möglicherweise müssen Sie den ParentNode rekursiv überprüfen, bis Sie den Textkörper erreichen, da der contenteditable mehrere Tags in unterschiedlicher Hierarchie erstellt. – z0mBi3

@ z0mBi3 Guter Punkt, da dies nur ein "Highlight-einmal" * Ding ist, es würde funktionieren. Ich würde OP empfehlen, jQuerys '.closes()' Funktion zu verwenden. Ich werde das in einer Bearbeitung erwähnen. –

Suchen Sie diese,

//html 
    <body> 
    <p id='editor1'>asdf</p> 
    <button onclick='red()'> 
    RED 
    </button> 
    </body> 

    //JavaScript 

    window.red = function(){ 
     //var getText = document.getElementById("editor1").innerHTML; 
     var selection = window.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    }

Plunker: https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

Quelle

2016-08-04 05:01:55

Ich habe bereits die Arbeitsfunktion, ich habe meine Frage bearbeitet, um das Problem hervorzuheben. – cosmo

Es tut mir leid, ich bin mir nicht sicher, was Ihr Problem ist. Willst du damit sagen, dass du sowohl ins div als auch ins externe div markierst und auf den Knopf klickst, dass die Elemente in div nur hervorgehoben werden sollen Rot? –

Das ist genau das Problem. Ich habe eine Geige verbunden, die das genaue Problem zeigt: https: //jsfiddle.net/xacqzhvq/ – cosmo

Wie getSelection() innerhalb eines bestimmten div?

Antwort

Verwandte Themen