Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo copiar y pegar HTML (aplicaciones de la Tienda Windows con JavaScript y HTML)

La acción de copiar y pegar no es igual para el contenido HTML y para otros formatos, como texto o vínculos. El principal reto es que el contenido puede contener referencias a otro contenido. Por ejemplo, puede que contenga etiquetas img cuyos atributos src hagan referencia a archivos de imagen almacenados localmente. Cuando los usuarios copian este contenido, esperan incluir tanto el texto como las imágenes. Las aplicaciones que admiten la acción de copiar y pegar HTML deben considerar la manera en que se administran estas referencias para garantizar que los usuarios compartan el contenido que quieren.

Para ayudarte a copiar y pegar HTML del modo que esperan los usuarios, el espacio de nombres Windows.ApplicationModel.DataTransfer incluye algunas funciones que ayudan a capturar los elementos a los que se hace referencia, como las imágenes. Te mostraremos cómo.

Consulta nuestra aplicación de muestra de Portapapeles para obtener ejemplos completos que indiquen cómo copiar y pegar otros tipos de datos.

Lo que debes saber

Tecnologías

Requisitos previos

  • Debes estar familiarizado con el tema sobre inicio rápido: conceptos básicos sobre el Portapapeles.
  • Debes saber usar JavaScript para identificar el contenido HTML seleccionado por el usuario y para encontrar las instancias de los elementos secundarios, como las etiquetas img, dentro de la selección.
  • Debes estar familiarizado con Microsoft Visual Studio 2012 y sus plantillas asociadas.
  • Debes estar familiarizado con JavaScript.

Copiar HTML al Portapapeles

  1. Crea el objeto DataPackage.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    
    
  2. Consigue el contenido HTML.

    Aquí obtenemos el contenido de un elemento HTML:

    
    var htmlFragment = document.getElementById("htmlTextToCopy").innerHTML;
    
    
  3. Prepara el contenido HTML para las operaciones del Portapapeles.

    Usa el método HtmlFormatHelper.CreateHtmlFormat para preparar el contenido HTML. Este método agrega los encabezados necesarios y garantiza que el HTML tiene el formato correcto para las operaciones del Portapapeles.

    
    var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlFragment);
    
    
  4. Agrega el contenido HTML al objeto DataPackage.
    
    dataPackage.setHtmlFormat(htmlFormat);
    
    
  5. Completa el mapa de recursos con las referencias de contenido.

    Si el usuario seleccionó HTML que contiene referencias a otro contenido, como archivos de imagen almacenados localmente, necesitas agregar las referencias a la propiedad DataPackage.ResourceMap. Estos son los pasos que debes seguir para agregar una referencia a una imagen:

    1. Primero, consigue la información de la ruta de acceso del atributo src de la etiqueta img incrustada en el contenido HTML.
    2. Convierte la información de la ruta de acceso en un identificador uniforme de recursos (URI).
    3. Obtén un objeto RandomAccessStreamReference para el archivo de imagen local.
    4. Agrega la RandomAccessStreamReference a la propiedad DataPackage.ResourceMap.
    
    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. Copia el contenido al Portapapeles.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Pegar HTML del Portapapeles

  1. Toma el contenido del Portapapeles.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Comprueba si el Portapapeles contiene datos HTML.
    
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
       ...
    }
    
    
  3. Si contiene datos HTML, recupéralos y agrégalos al modelo de objetos de documento, como indique el usuario.

    Precaución  Ten en cuenta que no se confía en el HTML de otra aplicación y no debes mostrarlo a menos que estés seguro de que el HTML no incluye contenido dinámico. Usa el método DataTransfer.HtmlFormatHelper.GetStaticFragment para obtener contenido HTML compartido sin elementos dinámicos, como etiquetas de script.

    
    
    var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
    document.getElementById("htmlOutput").innerHTML = htmlFragment;
    
    
  4. Sigue estos pasos para reemplazar las direcciones URL de archivos de imagen locales con el contenido del mapa de recursos:
    1. Comprueba el HTML para etiquetas img incrustadas.
    2. Si hay etiquetas img, recupera los objetos RandomAccessStreamReference del mapa de recursos.
    3. Reemplaza el contenido de los atributos src de las etiquetas img con las direcciones URL de los objetos RandomAccessStreamReference.
    
    
    ...
    
    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);
        });
    }
    
    

Ejemplos completos

Este ejemplo muestra cómo copiar HTML con una imagen incrustada en el Portapapeles.


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.");
    }
}

Este ejemplo muestra cómo obtener HTML almacenado en el Portapapeles, junto con cualquier imagen a la que se haga referencia en el contenido HTML.


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);
    });
}

Temas relacionados

Inicio rápido: conceptos básicos sobre el Portapapeles
Cómo copiar y pegar archivos
Cómo copiar y pegar imágenes
Directrices y lista de comprobación de comandos del Portapapeles
DataPackage
Windows.ApplicationModel.DataTransfer
Aplicación de muestra de Portapapeles

 

 

Mostrar:
© 2018 Microsoft