Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu

In Bezug auf andere, professionellere Blogsysteme gibt es im Codeblock eine Schaltfläche zum Kopieren des Codes. Code zum schnellen Kopieren eines ganzen Codeblocks. Deshalb möchte ich diese Funktion auch in meinen Blog integrieren.

Hinweis: Chrome-Test bestanden. Andere Browser wurden nicht getestet.

Umsetzungsideen:

1. Nachdem die Seite geladen wurde, verwenden Sie js, um jedem Pre-Tag eine Schaltfläche „Code kopieren“ hinzuzufügen

2. Fügen Sie der Schaltfläche ein Klickereignis hinzu. Die Funktion des Klickereignisses besteht darin, den Inhalt des Codeblocks zu kopieren

Implementierungscode:

Im CSS-Teil ist btn-pre-copy die Schaltfläche „Code kopieren“, die mit JS im Pre-Tag hinzugefügt wurde. Die Rolle von CSS besteht darin, es in der oberen rechten Ecke des Pre-Tags anzuzeigen. Hier sollten wir auf das Positionsattribut im Pre-Tag und im Button achten

.Inhalt vor{
    Position: relativ;
    Hintergrundfarbe: #f5f5f5;
    Rand: 1px durchgezogen #ccc;
    Rahmenradius: 4px;
    Polsterung: 10px;
}
vor .btn-pre-copy{
    -webkit-Benutzerauswahl: keine;
    -moz-Benutzerauswahl: keine;
    -ms-user-select: keine;
    -khtml-Benutzerauswahl: keine;
    Benutzerauswahl: keine;
    Position: absolut;
    oben: 10px;
    rechts: 12px;
    Schriftgröße: 12px;
    Zeilenhöhe: 1;
    Cursor: Zeiger;
    Farbe: hsla (0,0 %, 54,9 %, 0,8);
    Übergang: Farbe .1s;
}

Der js-Teil fügt hauptsächlich Schaltflächen zum Pre-Tag hinzu und implementiert den Kopierteil. Meine Implementierung des Kopierteils besteht hier darin, zuerst einen temporären Knotentextbereich zu instanziieren, dann den Inhalt von Pre in diesen temporären Knoten einzufügen, dann den zu kopierenden Inhalt auszuwählen und schließlich den Knoten zu zerstören. Spezifischer Referenzcode. Der js-Teil hängt von jquery ab

$(Funktion(){
    //Fügen Sie jeder Zeichenfolge mit Codeelementen einen Knoten zum Kopieren des Codes hinzu. let preList = $(".content pre");
    für (let pre von preList) {
        //Fügen Sie jedem Codeblock eine Schaltfläche „Code kopieren“ hinzu let btn = $("<span class=\"btn-pre-copy\" onclick='preCopy(this)'>Code kopieren</span>");
        btn.prependTo(vor);
    }
});

/**
    * Führen Sie den Vorgang zum Kopieren des Codes aus * @param obj
    */
Funktion Vorkopie(Objekt) {
    //Ausführen kopieren let btn = $(obj);
    lass vor = btn.parent();
    //Um die Kopierfunktion zu erreichen. Fügen Sie einen temporären Textbereichsknoten hinzu. Verwenden Sie es, um den Inhalt zu kopieren let temp = $("<textarea></textarea>");
    //Vermeiden Sie das Kopieren des Schaltflächentextes, wenn Sie den Inhalt kopieren. Zuerst vorübergehend leeren btn.text("");
    temp.text(pre.text());
    temp.appendTo(vor);
    temp.Auswahl();
    document.execCommand("Kopieren");
    temp.entfernen();
    //Buttonnamen ändern btn.text("Kopieren erfolgreich");
    //Ändere den Buttonnamen nach einer bestimmten Zeit wieder setTimeout(()=> {
        btn.text("Code kopieren");
    },1500);
}

Hier ist eine einfache Demo zu Gitee. Demo-Beispiel:

Online-Test: http://demo.jb51.net/js/2021/code_copy/

Dies ist das Ende dieses Artikels über das Hinzufügen eines Copycode-Button-Codes zum Pre-Tag des Website-Codeblocks. Weitere relevante Code-Highlights und das Hinzufügen von Copycode-Funktionsinhalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!