Language: HTML | XAML

So wird’s gemacht: Kopieren und Einfügen von HTML (HTML)

Applies to Windows only

Das Kopieren und Einfügen von HTML-Inhalten unterscheidet sich von dem anderer grundlegender Formate wie z. B. Text oder Links. Die größte Herausforderung besteht darin, dass der Inhalt Verweise auf andere Inhalte enthalten kann. So können beispielsweise img-Tags enthalten sein, deren src-Attribute auf lokal gespeicherte Bilddateien verweisen. Wenn der Benutzer diesen Inhalt kopiert, erwartet er, dass sowohl Text als auch Bild enthalten sind. In Apps, die das Kopieren und Einfügen von HTML unterstützen, muss die Behandlung dieser Verweise berücksichtigt werden, um sicherzustellen, dass Benutzer den gewünschten Inhalt kopieren und einfügen können.

Um sicherzustellen, dass HTML-Inhalte auf die vom Benutzer erwartete Weise kopiert und eingefügt werden können, enthält der Windows.ApplicationModel.DataTransfer-Namespace einige neue Funktionen zum Erfassen von referenzierten Elementen wie Bildern. Wir zeigen Ihnen, wie Sie diese Funktionen nutzen können.

In der Beispiel-App zum Einfügen in die Zwischenablage finden Sie ausführliche Beispiele, die das Kopieren und Einfügen anhand anderer Datentypen verdeutlichen.

Wissenswertes

Technologien

Voraussetzungen

  • Sie sollten mit Schnellstart: Grundlagen zur Zwischenablage vertraut sein.
  • Sie sollten wissen, wie Sie mit JavaScript vom Benutzer ausgewählten HTML-Inhalt identifizieren und nach Instanzen von untergeordneten Elementen wie img-Tags innerhalb dieser Auswahl suchen.
  • Sie sollten mit Visual Studio und den zugehörigen Vorlagen vertraut sein.
  • Sie sollten mit JavaScript vertraut sein.

Kopieren von HTML in die Zwischenablage

  1. Erstellen Sie das DataPackage-Objekt.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    
    
  2. Rufen Sie den HTML-Inhalt ab.

    Hier erhalten wir den Inhalt aus einem HTML-Element:

    
    var htmlFragment = document.getElementById("htmlTextToCopy").innerHTML;
    
    
  3. Bereiten Sie den HTML-Inhalt für die Zwischenablagevorgänge vor.

    Verwenden Sie die HtmlFormatHelper.CreateHtmlFormat-Methode, um den HTML-Inhalt vorzubereiten. Diese Methode fügt die erforderlichen Header hinzu und stellt sicher, dass das HTML richtig für Zwischenablagevorgänge formatiert ist.

    
    var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlFragment);
    
    
  4. Fügen Sie den HTML-Inhalt zum DataPackage-Objekt hinzu.
    
    dataPackage.setHtmlFormat(htmlFormat);
    
    
  5. Füllen Sie die Ressourcenzuordnung mit Inhaltsverweisen.

    Wenn der Benutzer HTML ausgewählt hat, das Verweise auf andere Inhalte enthält, wie z. B. lokal gespeicherte Bilddateien, müssen Sie die Verweise zur DataPackage.ResourceMap-Eigenschaft hinzufügen. Im Folgenden finden Sie die erforderlichen Schritte zum Hinzufügen eines Bildverweises:

    1. Rufen Sie zunächst Pfadinformationen aus dem src-Attribut des img-Tags ab, das im HTML-Inhalt eingebettet ist.
    2. Konvertieren Sie die Pfadinformationen in einen URI (Uniform Resource Identifier).
    3. Rufen Sie ein RandomAccessStreamReference-Objekt für die lokale Bilddatei ab.
    4. Fügen Sie RandomAccessStreamReference zur DataPackage.ResourceMap-Eigenschaft hinzu.
    
    var imagePath = document.getElementById("localImage").src;
    var imageUri = new Windows.Foundation.Uri(imagePath);
    var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(imageUri);
    dataPackage.resourceMap.insert(imagePath, streamRef);
    
    
  6. Kopieren Sie den Inhalt in die Zwischenablage.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Einfügen von HTML aus der Zwischenablage

  1. Rufen Sie die Inhalte aus der Zwischenablage ab.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Überprüfen Sie, ob die Zwischenablage HTML-Daten enthält.
    
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
       ...
    }
    
    
  3. Wenn die Zwischenablage HTML enthält, rufen Sie es ab, und fügen Sie es dem DOM (Document Object Model) wie vom Benutzer angegeben hinzu.

    Achtung  Achten Sie darauf, dass das HTML einer anderen App nicht vertrauenswürdig ist und nicht angezeigt werden sollte, wenn Sie nicht sicher sind, dass das HTML keine dynamischen Inhalte enthält. Verwenden Sie die DataTransfer.HtmlFormatHelper.GetStaticFragment-Methode, um freigegebene HTML-Inhalte ohne dynamische Elemente wie Skripttags abzurufen.

    
    
    var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
    document.getElementById("htmlOutput").innerHTML = htmlFragment;
    
    
  4. Ersetzen Sie anhand der folgenden Schritte ggf. die URLs lokaler Bilddateien mit den Inhalten der Ressourcenzuordnung:
    1. Überprüfen Sie den HTML-Code auf eingebettete img-Tags.
    2. Wenn img-Tags vorhanden sind, rufen Sie die RandomAccessStreamReference-Objekte aus der Ressourcenzuordnung ab.
    3. Ersetzen Sie die Inhalte der src-Attribute der img-Tags durch die URLs der RandomAccessStreamReference-Objekte.
    
    
    ...
    
    var images = document.getElementById("htmlOutput").getElementsByTagName("img");
    
    // Check first if there are any images (img tags) in the fragment, because
                // calling the getResourceMapAsync method can be resource intensive.
                if (images.length > 0) {
                    dataPackageView.getResourceMapAsync().done(function (resourceMap) {
    
                        // Check whether the resourceMap contains any items.
                        if (resourceMap.size > 0) {
                            for (var i = 0, len = images.length; i < len; i++) {
                                var imageElement = images[i];
                         
                                // Look up RandomAccessStreamReference value corresponding to this 
                                // image's SRC property.
                                var streamRef = resourceMap.lookup(imageElement.getAttribute("src"));
                                if (streamRef) {
                                    // Generate blob URL, and replace contents of the SRC property.
                                    replaceSrcURL(imageElement, streamRef);
                                }
                            }
                        }
                    });
    
                }
    ...
    
    function replaceSrcURL(imageElement, streamRef) {
        // Map the image element's src to a corresponding blob URL generated from the streamReference.
        streamRef.openReadAsync().done(function (imageStream) {
            var blobObject = 
                window.MSApp.createBlobFromRandomAccessStream(imageStream.contentType, imageStream);
            var blobUrl = window.URL.createObjectURL(blobObject, { oneTimeOnly: true });
            imageElement.src = blobUrl;
        }, function (e) {
             displayError("Error opening stream corresponding to the image element with SRC=\"" + 
                 imageElement.getAttribute("src") + "\". Error: " + e);
        });
    }
    
    

Vollständige Beispiele

In diesem Beispiel wird verdeutlicht, wie Sie HTML mit eingebettetem Bild in die Zwischenablage kopieren können.


function copyHTML() {
    // Create the DataPackage object.
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

    // Get the HTML content of an element.
    var htmlFragment = document.getElementById("htmlTextToCopy").innerHTML;

    // Prepare the HTML for Clipboard operations.
    var htmlFormat = 
        Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlFragment);
    if (htmlFormat !== "") {
        // Add the HTML to the DataPackage object
        dataPackage.setHtmlFormat(htmlFormat);

        // Populate the resourceMap with RandomAccessStreamReference objects 
        // corresponding to the local image file embedded in the HTML.
        var imagePath = document.getElementById("someEmbeddedImage").src;
        var imageUri = new Windows.Foundation.Uri(imagePath);
        var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(imageUri);
        dataPackage.resourceMap.insert(imagePath, streamRef);
    }

    try {
        // Copy the HTML content to Clipboard.
        Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
        displayStatus("Text and HTML formats have been copied to Clipboard");
    } catch (e) {
        // Copying data to Clipboard can potentially fail if, for example another app is holding
        // the Clipboard open.
        displayError("Error copying content to Clipboard: " + e + ". Try again.");
    }
}

In diesem Beispiel wird dargestellt, wie Sie in der Zwischenablage gespeichertes HTML einschließlich aller Bilder abrufen, auf die im HTML-Inhalt verwiesen wird.


function pasteHTML() {

    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {

        // Get the HTML Format (CF_HTML) from DataPackageView.
        dataPackageView.getHtmlFormatAsync().done(function (htmlFormat) {

            // Extract the HTML fragment.
            var htmlFragment = 
                Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);

            // Add the fragment to the DOM.
            document.getElementById("htmlOutput").innerHTML = htmlFragment;

            // Replace local image file URLs, if any, with the contents of the resourceMap.
            var images = document.getElementById("htmlOutput").getElementsByTagName("img");

            // Check first if there are any images (img tags) in the fragment, because
            // calling the getResourceMapAsync method can be resource intensive.
            if (images.length > 0) {
                dataPackageView.getResourceMapAsync().done(function (resourceMap) {

                    // Check whether the resourceMap contains any items.
                    if (resourceMap.size > 0) {
                        for (var i = 0, len = images.length; i < len; i++) {
                            var imageElement = images[i];
                     
                            // Look up RandomAccessStreamReference value corresponding to this 
                            // image's SRC property.
                            var streamRef = resourceMap.lookup(imageElement.getAttribute("src"));
                            if (streamRef) {
                                // Generate blob URL, and replace contents of the SRC property.
                                replaceSrcURL(imageElement, streamRef);
                            }
                        }
                    }
                });

            }

        }, function (e) {
            displayError("Error retrieving HTML format from Clipboard: " + e);
        });
    } else {
        document.getElementById("scenario1HtmlOutput").innerText = 
        "HTML format is not available in clipboard";
    }
}

function replaceSrcURL(imageElement, streamRef) {
    // Map the image element's src to a corresponding blob URL generated from the streamReference.
    streamRef.openReadAsync().done(function (imageStream) {
        var blobObject = 
            window.MSApp.createBlobFromRandomAccessStream(imageStream.contentType, imageStream);
        var blobUrl = window.URL.createObjectURL(blobObject, { oneTimeOnly: true });
        imageElement.src = blobUrl;
    }, function (e) {
         displayError("Error opening stream corresponding to the image element with SRC=\"" + 
             imageElement.getAttribute("src") + "\". Error: " + e);
    });
}

Verwandte Themen

Schnellstart: Grundlagen zur Zwischenablage
Kopieren und Einfügen von Dateien
Kopieren und Einfügen von Bildern
Richtlinien und Prüfliste für Befehle für die Zwischenablage
DataPackage
Windows.ApplicationModel.DataTransfer
Beispiel-App zum Einfügen in die Zwischenablage

 

 

Anzeigen:
© 2015 Microsoft