Partager via

Didacticiel : Configurer le contrôle Rich Text Editor sur Power Pages

  • Article

Dans le didacticiel, vous allez configurer le composant de l’éditeur de texte enrichi sur un formulaire Microsoft Dataverse et activer l’éditeur de texte enrichi pour qu’il soit visible sur une page Web.

Ce didacticiel utilisera le tableau Commentaires et la page web Nous contacter disponible dans les modèles de Disposition de démarrage .

Conditions préalables

  • Votre version de portail doit être 9.4.3.x ou ultérieure.
  • Un site utilisant l’un des modèles de Disposition de démarrage.

Étape 1. Ajouter le composant de code à un champ dans un formulaire

  1. Dans le studio de conception, sélectionnez l’espace de travail des données.

  2. Sélectionnez la table Commentaires.

  3. Sélectionnez la section Formulaires, puis de modifier le formulaire de contact simple.

  4. Sélectionnez le champ Message.

  5. Choisissez + Composant et sélectionnez le composant Entrée de nombre.

    Ajoutez un composant RTE au formulaire.

  6. Cliquez sur Terminé.

  7. Sélectionnez Enregistrer et Publier le formulaire.

Étape 2. Configurer le composant rich text editor sur la page web

Dans les étapes suivantes, nous allons configurer la page de commentaires existante, vous pouvez également créer votre propre page et ajouter votre propre composant formulaire.

  1. Dans l’espace de travail Pages, sélectionnez la page Nous contacter.

  2. Le champ Message doit s’afficher sur le formulaire avec le message Activer le composant personnalisé pour voir ce champ dans l’aperçu.

  3. Sélectionnez le champ et choisissez Modifier le champ.

  4. Sélectionnez le champ Activer le composant personnalisé.

    Activez le composant RTE dans le studio de conception.

  5. Sélectionnez OK.

  6. Sélectionnez Synchroniser.

Note

Pour afficher les données sous forme de texte enrichi, vous devrez peut-être augmenter la taille des colonnes de texte pour tenir compte des informations supplémentaires.

Étape 3.1 Ajouter des autorisations de table pour la table de pièces jointes en texte enrichi

Pour utiliser et stocker des images dans l’éditeur de texte enrichi sur le portail, vous devrez ajouter des autorisations de table à la table pièce jointe en texte enrichi (msdyn_richtextfile).

  1. En utilisant le studio de conception, sélectionnez l’espace de travail Configurer.

  2. Sélectionnez Autorisations de table.

  3. Sélectionnez + Nouvelle autorisation pour créer une autorisation de table pour la table de pièces jointes en texte enrichi. Le nom peut être tout ce que vous choisissez, dans cet exemple, nous utilisons Document joint RTE.

  4. Pour Type d’accès, sélectionnez Accès global.

    Note

    Le type Accès global est choisi, car il n’existe aucune relation entre la table configurée pour utiliser le contrôle rich text editor et la table de pièces jointes de texte enrichi.

  5. Sous Autorisation de, cochez les cases Lire, Écrire, Créer et Supprimer.

  6. Attribuez un rôle web à l’autorisation de table.

    Configuration des autorisations du tableau de texte enrichi.

Important

Si vous souhaitez stocker des images sous forme de chaînes de base64 directement dans la colonne configurée pour utiliser le contrôle Rich Text Editor, vous devez configurer le contrôle à l’aide d’un Fichier de configuration JSON. Définissez disableImages et disableDefaultImageProcessing sur true pour permettre aux images d’être rendues de manière cohérente sur tous les clients. L’utilisation de cette méthode ne nécessite pas l’autorisation de table globale sur la table pièce jointe en texte enrichi (msdyn_richtextfile).

Étape 3.2. Ajouter un paramètre de site API Web

Afin d’enregistrer des images dans le contrôle de l’éditeur de texte enrichi, vous devrez ajouter quelques paramètres de site.

  1. Ouvrez l’application Gestion des portails.

  2. Accédez à Paramètres du site.

  3. Créez les paramètres de site suivants, entrez le nom, votre site web et la valeur true et sélectionnez Enregistrer et fermer.

    Nom du paramètre du site active
    Webapi/msdyn_richtextfile/enabled true
    Webapi/msdyn_richtextfile/fileds *

Étape 4. Affichez l’aperçu du site.

  1. Dans le studio de conception, sélectionnez Synchroniser.

  2. Sélectionnez Aperçu, puis sélectionnez Bureau, accédez à la page Nous contacter, vous devriez voir le composant personnalisé activé.

    Composant RTE sur un formulaire.

Éditeur de texte enrichi sur un formulaire en lecture seule

Sur un formulaire en lecture seule, le contenu de l’éditeur de texte enrichi est disponible en lecture et affiche la mise en forme et les images. Le contenu peut être lu, mais pas modifié ou mis à jour.

Note

Seuls les formats de fichier .PNG, .JPG. ou .GIF sont pris en charge pour l’opération de glisser-déplacer.

Affichage du champ de contenu de l’éditeur de texte enrichi en utilisant Liquid ou l’API web Pages

Le champ de contenu de l’éditeur de texte enrichi peut être affiché en utilisant Liquid ou l’API web Pages. Si le champ contient des fichiers image, ils auront un chemin de référence à l’API web Dataverse. Pour afficher ces images sur une page web Pages, vous devez remplacer le chemin actuel par le chemin de l’API Pages correspondant.

Exemple :

L’élément image dans le champ de contenu de l’éditeur de texte enrichi sera affiché de la manière suivante et contiendra une référence au chemin de l’API web Dataverse :

   <img loading="lazy" src="/api/data/v9.0/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Pour mettre à jour l’élément image, remplacez /api/data/v9.0 par /_api, comme indiqué ci-dessous :

   <img loading="lazy" src="/_api/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Voir aussi