Insérer des pièces jointes dans un corps de texte avec Drupal 8

Des altères

Drupal 8 permet nativement d'insérer des images au sein d'un corps de texte, à condition d'utiliser bien sûr un format de texte qui autorise cette fonctionnalité. Mais peut-on faire de même et insérer facilement des documents, des pièces jointes, au sein d'un texte de base ? Nous disposons bien sûr de nombreuses solutions avec Drupal 8 pour associer des documents à un contenu. Depuis un champ dédié, nous permettant de maîtriser son emplacement au niveau du rendu de la page, depuis des paragraphes permettant à l'auteur de positionner son document où bon lui semble, tout en gardant la maîtrise du rendu final, ou encore avec la suite media entity qui nous permet également d'intégrer des médias, dont des documents, au sein d'un corps de texte. Bref les solutions sont nombreuses.

Nous disposons aussi d'une solution très simple, configurable en une minute top chrono, pour pouvoir charger un document dans un corps de texte avec le module D8 editor file upload. Découvrons rapidement ce module.

Après avoir installé le module, nous allons configurer le format de texte, disposant de CKEditor, pour lequel nous souhaitons l'utiliser.

Configurons le format de texte HTML Complet et cliquons sur le bouton correspondant.

Les formats de texte de Drupal 8

 

Vous remarquez un nouveau bouton (un trombone), dans la liste des boutons disponibles, permettant d'activer le widget de chargement d'un fichier. Nous faisons un glisser déposer de ce bouton dans la barre d'outils active.

La barre d'outils de CKEditor

 

Nous avons déposé ce nouveau bouton dans la barre d'outils active (à côté de bouton Image). Cette action fait apparaître les options de configuration nous permettant de spécifier le répertoire de transfert des fichiers, les extensions de fichier autorisées et la taille maximum d'un fichier.

Activation du wigdet de chargement d'un fichier pour CkEditor

 

Si vous avez activé sur ce format de texte le filtre Limiter les balises HTML autorisées et corriger les fautes de HTML, assurez vous que la balise <a> dispose bien des attributs possibles data-entity-type and data-entity-uuid, comme indiqué dans la capture ci-dessous.

les balises autorisées

Et c'est fini. En moins d'une minute nous venons de configurer le module et nous pouvons désormais charger autant de pièces que nécessaires dans notre corps de texte.

 

Nous pouvons désormais charger un document dans n'importe quel corps de texte qui utilisera le format HTML complet.

Widget de transfert de fichier

 

Il est possible de renommer le fichier pour lui donner un nom plus attrayant que le nom du fichier par défaut.

Fichier transféré

 

 

Et le rendu de votre contenu disposant de sa pièce jointe.

Rendu du contenu avec le fichier joint

Les possibilités de mise en forme des fichiers associés à une page sont alors limitées. Mais ce n'est pas la vocation de ce module qui permet de charger simplement un fichier, au même titre que les images, dans un corps de texte. Pour un rendu tout aussi simple. Pour des besoins plus avancés de mise en forme des documents associés, ou encore des besoins liés au contrôle d'accès à ces documents, il faudra bien sûr recourir à d'autres solutions. 

Un module efficace, simple, qui répond à un besoin immédiat et souvent vital. Parfois c'est ce genre de petits détails qui peut faire une différence dans le choix dans un outil, car il répond aux fonctions de base que n'importe quel éditeur s'attend à disposer out of the box.

 

Commentaires

Soumis par Denis (non vérifié) le 31/07/2018 à 11:45 - Permalien

Bonjour,
j'ai suivi le début de votre tuto mais je n'ai pas le trombone.
Ai-je manqué une procédure ?

Soumis par Papik (non vérifié) le 11/10/2023 à 10:28 - Permalien

Bonjour,
J'héberge un serveur Ubuntu avec un "Drupal 10" pour tester, avec un ami à distance, des sites internet que nous développons.
Sur l'un de ces sites mi-septembre un article a été créé avec l'éditeur "CKEditor 5". Une image "Parchemin.gif" a été intégrée. Le résumé a été modifié pour n'afficher que l'image importée via CKEditor. Tout fonctionnait parfaitement bien.
Jusqu'à ce lundi 9 octobre. Si le parchemin s'affiche bien sur la page d'accueil, en ouvrant l'article, c'est une photo de Laureline (Héroïne de Valerian et Laureline) qui s'affiche en grand à la place du parchemin !
Le pire est qu'en passant en mode édition, Laureline laisse la place au parchemin.
Comment expliquer ça ? Laureline est présente dans l'affichage, mais pas dans le source... Halloween dans deux semaines ?
En cherchant un peu j'ai découvert qu'en mode "Source" le lien "<IMG", créé par CKEditor, avait comme paramètre "data-entity-uuid="dd719e0f-e81b-4b5b-ab9d-df9a680bd3be". Ne connaissant pas l'utilité de ce paramètre, je l'ai supprimé. Et, après sauvegarde, surprise, Laureline a disparu !

Pouvez vous m'expliquer l'utilité du "data-entity-uuid=" ? Pourquoi est-il généré par CKEditor ? Et comment a-t-il pu afficher une autre image ?

D'avance Merci.

Ajouter un commentaire