Schaltfläche zum Hervorheben des ausgewählten Bereichs durch Javascript

Lesezeit: 2 Minuten

Ich versuche, ein Lerntool für eine Seite zu erstellen, mit dem ein Benutzer einen beliebigen Text auf der Seite auswählen und auf eine Schaltfläche klicken kann. Dieser Klick formatiert dann den markierten Text gelb hinterlegt. Ich kann dies innerhalb eines einzelnen Tags zum Laufen bringen, aber wenn sich der Auswahlbereich über mehrere Tags erstreckt (z. B. das erste LI in einer ungeordneten Liste zusammen mit der Hälfte des zweiten), habe ich Schwierigkeiten, den Stil anzuwenden. Ich kann die Auswahl hier leider nicht mit einer Spanne umschließen.

Grundsätzlich möchte ich die damit verbundenen Effekte contentEditable und execCommand ohne tatsächlich etwas auf der Seite bearbeitbar zu machen, außer dem Anwenden einer Hintergrundfarbe auf den ausgewählten Text mit einem Klick auf eine Schaltfläche.

Ich bin offen für jQuery-Lösungen und habe gefunden dieses Plugin Das scheint die Möglichkeit zu vereinfachen, Bereiche browserübergreifend zu erstellen, aber ich konnte damit keine Formatierung auf den ausgewählten Bereich anwenden. Ich kann von der Konsole aus sehen, dass sie die Auswahl aufgreift, aber so etwas wie:

var selected = $().selectedText();
$(selected).css("background-color","yellow");

hat keine Wirkung.

Jede Hilfe, die mich in die richtige Richtung weist, wäre sehr dankbar.

Schaltflache zum Hervorheben des ausgewahlten Bereichs durch Javascript
Tim unten

Das Folgende sollte tun, was Sie wollen. In Nicht-IE-Browsern schaltet es sich ein designMode, wendet eine Hintergrundfarbe an und wechselt dann designMode wieder ab.

AKTUALISIEREN

Funktioniert in IE 9 behoben.

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

  • Das ist fantastisch. Ich weiß nicht, warum ich nicht auf die Idee gekommen bin, den Designmodus nur für die Auswahl einzuschalten und dann wieder auszuschalten. Vielen Dank.

    Benutzer196373

    26. Oktober 09 um 14:51 Uhr

Soweit ich weiß, können Sie kein Styling auf normalen Text anwenden. Sie sind eine Art HTML-Element, mit dem Sie arbeiten können. Sie könnten versuchen, den ausgewählten Text mit einer Spanne zu umschließen und dann die Spanne zu formatieren.

$().selectedText().wrap("<span></span>").parent().addClass("wrapped").css({backgroundColor: "Yellow"});

Ich habe auch eine Klasse von “wrapped” hinzugefügt, damit Sie bei nachfolgenden Versuchen, Text hervorzuheben, vorherige Hervorhebungen entfernen können.

$(".wrapped").each(function(){ ($(this).replaceWith( $(this).text() });

Code ist ungetestet.

  • Danke für den Versuch. Leider hat es keine Wirkung. Soweit ich das beurteilen kann, gibt die von mir verlinkte Plugin-Bibliothek kein Objekt zurück, mit dem jQuery richtig zielen kann? Nicht sicher. Danke noch einmal.

    Benutzer196373

    26. Oktober 09 um 1:23 Uhr

.

503560cookie-checkSchaltfläche zum Hervorheben des ausgewählten Bereichs durch Javascript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy