Langage: HTML | XAML

Comment copier et coller du contenu HTML (XAML)

Applies to Windows only

La copie et le collage de contenu HTML se distinguent de la copie et du collage de contenu d’autres formats de base, tels que du texte ou un lien. La principale difficulté avec ce type de contenu est qu’il peut comporter des références à d’autres contenus. Par exemple, il peut contenir des balises img dont les attributs src font référence à des fichiers image stockés localement. Quand les utilisateurs copient ce type de contenu, leur intention est d’inclure à la fois le texte et les images. Quand vous créez une application qui prend en charge la copie et le collage de contenu HTML, vous devez réfléchir à la façon dont ces références doivent être gérées pour permettre aux utilisateurs de copier et de coller le contenu qu’ils souhaitent.

Pour fournir une prise en charge de la copie et du collage de contenu HTML qui réponde aux attentes des utilisateurs, vous pouvez utiliser l’espace de noms Windows.ApplicationModel.DataTransfer. Celui-ci inclut quelques fonctions qui facilitent la capture des éléments référencés, tels que les images. Nous allons vous montrer comment faire.

Via notre exemple d’application utilisant le Presse-papiers, vous découvrirez des exemples complets qui montrent comment copier et coller d’autres types de données.

Ce que vous devez savoir

Technologies

Prérequis

  • Vous devez être familiarisé avec Démarrage rapide : fonctions de base du Presse-papiers.
  • Vous devez être familiarisé avec Visual Studio et ses modèles connexes.
  • Vous devez être familiarisé avec le développement en C#.
  • Vous devez savoir identifier le contenu HTML sélectionné par l’utilisateur et trouver les instances des éléments enfants (comme les balises img) dans cette sélection.

Copie de contenu HTML dans le Presse-papiers

  1. Préparez du contenu HTML pour les opérations du Presse-papiers.

    Utilisez la méthode HtmlFormatHelper.CreateHtmlFormat pour préparer le contenu HTML. Cette méthode ajoute les en-têtes nécessaires et permet de s’assurer que le contenu HTML est correctement mis en forme pour les opérations du Presse-papiers.

    
    const string imgSrc = "ms-appx-web:///assets/windows-sdk.png";
    const string htmlFragment = "This sample shows how to copy HTML to the Clipboard. <br />"
            + "To <b>copy</b>, add text formats to a <i>DataPackage</i>, "
            + "and then pass <i>DataPackage</i> the to Clipboard.<br /> "
            + "To handle local image files (such as the one below), use "
            + "resourceMap collection."
            + "<br /><img id=\"scenario1LocalImage\" src=\""
            + imgSrc
            + "\" /><br />";
    
            string htmlFormat = HtmlFormatHelper.CreateHtmlFormat(htmlFragment);
    
    
  2. Créez l’objet DataPackage.
    
    var dataPackage = new DataPackage();
    
    
  3. Ajoutez le contenu HTML à l’objet DataPackage.
    
    dataPackage.SetHtmlFormat(htmlFormat);
    
    
  4. Remplissez le mappage de ressources à l’aide des références de contenu.

    Si le contenu HTML comporte des références à un autre type de contenu, par exemple des fichiers image stockés localement, vous devez ajouter les références à la propriété DataPackage.ResourceMap. Voici les étapes nécessaires pour ajouter une référence à une image :

    1. Créez un objet Uri pour représenter le fichier image local.
    2. Passez l’objet Uri à la méthode RandomAccessStreamReference.CreateFromUri pour obtenir une référence de flux à accès aléatoire pour le fichier image local.
    3. Ajoutez RandomAccessStreamReference à la propriété DataPackage.ResourceMap.
    
    
    // Populate the resource map with RandomAccessStreamReference objects 
    // corresponding to local image files embedded in the HTML.
    var imgUri = new Uri(imgSrc);
    var imgRef = RandomAccessStreamReference.CreateFromUri(imgUri);
    dataPackage.ResourceMap[imgSrc] = imgRef;
    
    
  5. Copiez le contenu dans le Presse-papiers.
    
    Clipboard.SetContent(dataPackage);
    
    

Collage de contenu HTML à partir du Presse-papiers

  1. Récupérez le contenu du Presse-papiers.
    
    var dataPackageView = Clipboard.GetContent();
    
    
  2. Vérifiez si le Presse-papiers contient des données HTML.
    
    if (dataPackageView.Contains(StandardDataFormats.Html))
    {
        ...
    }
    
    
  3. Si le Presse-papiers contient du contenu HTML, récupérez-le et ajoutez-le à votre application comme indiqué par l’utilisateur. L’exemple suivant passe le contenu HTML à un contrôle WebView appelé OutputHtml.

    Attention  N’oubliez pas que le contenu HTML d’une autre application n’est pas fiable et qu’il est déconseillé de l’afficher, sauf si vous êtes sûr qu’il ne s’agit pas d’un contenu HTML dynamique. Utilisez la méthode DataTransfer.HtmlFormatHelper.GetStaticFragment pour récupérer du contenu HTML partagé, sans éléments dynamiques tels que des balises de script.

    
    string htmlFormat = null;
    try
    {
        htmlFormat = await dataPackageView.GetHtmlFormatAsync();
    }
    catch (Exception ex)
    {
        rootPage.NotifyUser("Error retrieving HTML format from Clipboard: " 
                + ex.Message, NotifyType.ErrorMessage);
    }
    
    if (htmlFormat != null)
    {
        string htmlFragment = HtmlFormatHelper.GetStaticFragment(htmlFormat);
        OutputHtml.NavigateToString("Html:<br/ > " + htmlFragment);
    }
    
    
  4. Dans l’exemple précédent, le contrôle WebView analyse et affiche le contenu HTML, y compris les éléments référencés tels que les images spécifiées par les balises img. Si vous devez accéder directement à des éléments référencés, vous pouvez les obtenir à partir de la propriété DataPackage.ResourceMap, comme le montre l’exemple suivant.
    
    IReadOnlyDictionary<string, RandomAccessStreamReference> resMap = null;
    try
    {
        resMap = await dataPackageView.GetResourceMapAsync();
    }
    catch (Exception ex)
    {
        rootPage.NotifyUser("Error retrieving Resource map from Clipboard: " 
                + ex.Message, NotifyType.ErrorMessage);
    }
    
    if (resMap != null)
    {
        if (resMap.Count > 0)
        {
            foreach (var item in resMap)
            {
               OutputText.Text += Environment.NewLine + "Key: " + item.Key;
            }
        }
        else
        {
            OutputText.Text += Environment.NewLine + "Resource map is empty";
        }
    }
    
    

Exemples complets

Cet exemple montre comment copier du contenu HTML avec une image incorporée vers le Presse-papiers.


void copyHTML()
{
    // Prepare some HTML for copying to the Clipboard.
    const string imgSrc = "ms-appx-web:///assets/windows-sdk.png";
    const string htmlFragment = "This sample shows how to copy HTML to the "
            + "Clipboard. <br />"
            + "To <b>copy</b>, add text formats to a <i>DataPackage</i>, "
            + "and then pass <i>DataPackage</i> the to Clipboard.<br /> "
            + "To handle local image files (such as the one below), use "
            + "resourceMap collection."
            + "<br /><img id=\"scenario1LocalImage\" src=\""
            + imgSrc
            + "\" /><br />";

    string htmlFormat = HtmlFormatHelper.CreateHtmlFormat(htmlFragment);

    // Create a DataPackage object.
    var dataPackage = new DataPackage();

    // Set the content of the DataPackage as HTML format.
    dataPackage.SetHtmlFormat(htmlFormat);

    // Populate the resource map with RandomAccessStreamReference objects 
    // corresponding to local image files embedded in the HTML.
    var imgUri = new Uri(imgSrc);
    var imgRef = RandomAccessStreamReference.CreateFromUri(imgUri);
    dataPackage.ResourceMap[imgSrc] = imgRef;

    try
    {
        // Set the DataPackage to the clipboard.
        Clipboard.SetContent(dataPackage);
        OutputText.Text = "HTML format was copied to the Clipboard. ";
    }
    catch (Exception ex)
    {
        // Copying data to the Clipboard can fail if, another application is 
        // holding the Clipboard open.
        rootPage.NotifyUser("Error copying content to Clipboard: " +
            ex.Message + ". Try again", NotifyType.ErrorMessage);
    }
}

Cet exemple montre comment coller du contenu HTML à partir du Presse-papiers.


async void PasteHTML()
{
    var dataPackageView = Clipboard.GetContent();

    if (dataPackageView.Contains(StandardDataFormats.Html))
    {
        string htmlFormat = null;
        try
        {
            htmlFormat = await dataPackageView.GetHtmlFormatAsync();
        }
        catch (Exception ex)
        {
            rootPage.NotifyUser("Error retrieving HTML format from Clipboard: " + ex.Message, NotifyType.ErrorMessage);
        }

        if (htmlFormat != null)
        {
            string htmlFragment = HtmlFormatHelper.GetStaticFragment(htmlFormat);
            OutputHtml.NavigateToString("Html:<br/ > " + htmlFragment);
        }
    }
    else
    {
        OutputHtml.NavigateToString("Html:<br/ > No HTML format on clipboard");
    }
}

Rubriques associées

Démarrage rapide : fonctions de base du Presse-papiers
Recommandations et liste de vérification sur les commandes du Presse-papiers
DataPackage
Windows.ApplicationModel.DataTransfer
Exemple d’application utilisant le Presse-papiers

 

 

Afficher:
© 2014 Microsoft