Wie bekomme ich den ausgewählten Text in ein Textfeld? [duplicate]

Ich versuche, mein eigenes zu machen WYSIWYG Editor. Gibt es eine Möglichkeit, den Text abzurufen, der vom Benutzer in a Textbereich?

Wenn der Benutzer beispielsweise ein Wort auswählt und dann auf die Schaltfläche klickt, wie finde ich dann heraus, welcher Text ausgewählt wurde?

Ich verwende jQuery.

window.getSelection().toString() hat bei mir mit Chrome funktioniert, aber nicht Firefox.

Zum Abrufen der ausgewählten Inhalte in a <textarea> mit Firefox:

function getSel() // JavaScript
{
    // Obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");

    // Obtain the index of the first selected character
    var start = txtarea.selectionStart;

    // Obtain the index of the last selected character
    var finish = txtarea.selectionEnd;

    // Obtain the selected text
    var sel = txtarea.value.substring(start, finish);


    // Do something with the selected content
}

Könntest du auch verwenden aktivesElement anstatt getElementById.

Referenz:

• Textbereich
• dokumentieren

Die Handhabung der Auswahl ist für verschiedene Browser unterschiedlich:

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

Das gibt Ihnen ein Bereichsobjekt. Jeder Bereich stellt eine einzelne Auswahl dar (mit der Steuerungs-/Befehlstaste ist es möglich, mehrere aktive Auswahlen zu treffen).

Die Art des Bereichsobjekts, das Sie jetzt haben, hängt davon ab, welchen Browser Sie verwenden. Für IE ist es ein Text Range-Objekt; für andere ist es ein Selection-Objekt. Um ein Selection-Objekt in einen Textbereich umzuwandeln, können Sie getRangeAt aufrufen; für Safari müssen Sie das erstellen:

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

Das Range-Objekt stellt Ihnen die Start- und End-Dom-Elemente und den Text-Offset der Auswahl bereit.

Weitere Informationen zu Bereichsobjekten finden Sie unter quirksmode.org hier

Wenn Sie jQuery verwenden, sollten Sie sich die leichtes jQuery RTE-Plugin von Batiste Bieler. Es kann genug für Ihre Bedürfnisse sein oder Ihnen zumindest etwas für den Anfang geben.

getSelection()

Dies variiert je nach Browser etwas. Siehe hier für eine Funktion, die angeblich in den meisten Fällen funktioniert:
http://snipplr.com/view/775/getselection/

Probieren Sie das Plugin jquery-fieldselection aus.

Sie können es von herunterladen hier. Es gibt auch ein Beispiel.

Eine kleine Funktion, die den ausgewählten String/Text von a erhält Textbereich oder ein Eingang Element:

function getInputSelection(elem){
  if(typeof elem != "undefined"){
    s = elem[0].selectionStart;
    e = elem[0].selectionEnd;
    return elem.val().substring(s, e);
  }
  else{
    return '';
  }
}

Beachten Sie, dass der obige Code benötigt jQuery für die Arbeit. Ein Beispiel für das Abrufen der ausgewählten Zeichenfolge eines Eingabeelements mit ID abc123 ist:

getInputSelection($("#abc123"));

Die obige Funktion gibt die ausgewählte Zeichenfolge zurück. Wenn keine vom Benutzer ausgewählte Zeichenfolge vorhanden ist, wird sie zurückgegeben null.

Mehr Beispiele

getInputSelection($("body").find("input[name=user]"));

Bei mit Klassennamen ausgewählten Elementen wird die ausgewählte Zeichenfolge des ersten Elements des Arrays von Elementen zurückgegeben und nicht die ausgewählte Zeichenfolge aller Elemente. Schließlich wird die Auswahl auf einer Seite immer sein 1.

function getSel() {
    var input = $("#text");
    return input.html().toString().substring(getSelection().baseOffset, getSelection().extendOffset);
}