Copier et coller dans l’éditeur de contenu enrichi

Copiez et collez le code source HTML et CSS des éléments du canevas.

Modifiez directement le CSS d’un élément pour ajouter un style ou copiez-collez du code pour migrer le contenu à partir d’autres sources.

Important :

Pour la version de mai 2025, si un contenu collé a une couleur d’arrière-plan, le panneau de droite n’affiche pas la couleur, sauf s’il est formaté avec un style d’image d’arrière-plan. L’arrière-plan agit comme des calques pour ajouter une couleur d’arrière-plan, un dégradé et une image à votre contenu. La fonction d’édition du code peut être utilisée pour ajuster le style collé de la couleur d’arrière-plan à la valeur correspondante pour le CSS de l’image d’arrière-plan, si vous souhaitez que la couleur soit affichée sur le panneau de droite.

Conseil :

La fonctionnalité d’opacité des couleurs est une nouvelle fonctionnalité qui n’est prise en charge dans aucune version antérieure.

Limitations

• Les navigateurs peuvent afficher des comportements de copier-coller différents en raison de différences fonctionnelles de navigateur.

• La copie d’un composant sur le canevas ne se duplique pas comme prévu sur ctrl+v, vous devez donc accéder à la barre d’outils du composant.

Figure 1. Barre d’outils du composant

Remarque :

Vous pouvez également ajouter de l’opacité de couleur au canevas. Cependant, l’une des limitations est que le copier/coller ne transfère pas tout le style lorsque les couleurs sont formatées en rgba() au lieu de rgb ou hex.

• Le collage de texte en surbrillance n’est pas pris en charge dans les composants de texte, de sorte que les comportements qui fonctionnent dans Chrome peuvent ne pas fonctionner dans Firefox ou Safari.

• Nous vous recommandons d’ajouter les couleurs du contenu collé au format code hexadécimal (#rrggbbaa pour ajouter de l’opacité, ou vous pouvez utiliser #rrggbb).

  • Le hashtag (#) est obligatoire.
  • Les codes hexadécimaux commencent par un signe dièse ou un hashtag (#) suivi de 6 lettres s’il n’y a pas d’opacité de couleur, ou de 8 lettres s’il y a une opacité de couleur.
  • La syntaxe à 8 caractères ne fonctionne que si elle est ajoutée à l’élément CSS via la fonction edit-code. Le champ de saisie de couleur sur le panneau de droite n’accepte que la syntaxe à 6 caractères.
• Vous pouvez également ouvrir le modal Modifier le code pour ajuster les couleurs rgba() du composant en code hexadécimal afin de refléter le style.

Si certains styles ne sont pas appliqués (par exemple, Nom de la police) ou si l’ajustement de l’un des paramètres du contenu collé ne fonctionne pas, essayez d’abord d’effacer le style en sélectionnant le « x » à côté de Nom de la police.

Figure 2. Nom de la police

• Si votre contenu collé ne s’affiche pas comme prévu ou se comporte mal, essayez de copier un petit morceau au lieu d’une grande section à la fois.
• • Si votre contenu collé s’affiche différemment avant et après l’enregistrement et le rechargement, cela peut être dû à certaines balises de script supprimées par l’assainisseur HTML.

Zones désélectionnées

• Si vous sélectionnez les zones roses , tout composant sélectionné sur le canevas est désélectionné.

• Si vous sélectionnez les zones vertes , le composant courant est conservé.

Figure 3. Canevas d’éditeur de contenu enrichi

Remarque :

Le copier-coller de texte en surbrillance n’est pas pris en charge dans les composants de texte et les expériences des navigateurs peuvent se comporter différemment. Les comportements qui fonctionnent dans Chrome peuvent ne pas fonctionner dans Firefox ou Safari.

Actions et comportements de contenu enrichi supplémentaires

Remarque :

Les gestionnaires de contenu et les administrateurs ont la possibilité d’appliquer des couleurs d’arrière-plan aux éléments de canevas sélectionnés, y compris les images. Les fonctionnalités disponibles incluent l’utilisation de couleurs unies et dégradées, ainsi que des ajustements pour l’opacité des couleurs. Ces paramètres sont accessibles dans le panneau de droite sous l’onglet Style des paramètres lors de l’ajout de contenu enrichi à un élément de canevas.

La possibilité d’ajouter de l’opacité de couleur au canevas est une fonction utile à votre disposition. La seule limitation est que le style de la fonction de copier-coller est différent lorsque les couleurs sont formatées en rgba() au lieu de rvb, ou hex.

• Ajoutez des couleurs au format code hexadécimal (#rrggbbaa pour ajouter de l’opacité ou simplement #rrggbb).
• Ouvrez le modal Modifier le code pour ajuster les couleurs rgba() du composant en code hexadécimal afin de refléter le style.
• L’opacité des couleurs affiche les options de dégradé et de calque de couleur. Comme le calque d’image d’arrière-plan est le premier, l’opacité n’est pas pertinente. Le dégradé est FFFFFF et OOOOOO par défaut.

• Couleur d’arrière-plan vers l’élément de canevas affiche les options d’arrière-plan pour le dégradé, la couleur et l’image. Activez, puis sélectionnez les options d’arrière-plan.

Remarque :

Le contenu est collé à la fin du canevas lorsqu’aucun composant n’est sélectionné.

• Si un composant est sélectionné, le contenu est collé en dessous.
• Si un composant est en cours de modification, le comportement de collage suivant se produit :
  • Si la source est du texte brut, le contenu est collé dans le composant actuel et fait correspondre le texte collé au style de destination.
  • Si la source est formatée, elle est ajoutée sous le composant le plus récent.
  • Si le composant active les composants imbriqués (par exemple, Tab, Accordéon ou Ligne), le contenu est ajouté dans le conteneur parent.
• Si les composants sont désélectionnés lorsqu’ils sont sélectionnés hors du canevas, cela active le collage avec la mise en forme source.

Pour plus d’informations sur la modification du code source, consultez Modification du code source dans l’éditeur de contenu enrichi