Fonctionnalités

L'éditeur de texte vous permet d'agrémenter vos éléments de contenus au moyen de différentes fonctionnalités. Dans cet éditeur, un paragraphe est identifié par des pointillés.

La barre d'outils

La barre d'outils unique apparait au dessus du curseur dès que l'on clique dans une zone de texte riche. On peut noter, au dessus à droite de la zone de texte, la présence d'un bouton 'Mode sans distraction' permettant de passer la zone de texte enrichi en plein écran.

Bien qu'unique, cette barre comporte 3 catégories : outils pour les paragraphes, pour le texte et pour insérer du contenu riche.

Pour un paragraphe

Positionné dans un paragraphe et sans sélection de texte vous pouvez :

• monter ou descendre un paragraphe ou un contenu dans la zone de texte
• choisir le style de votre texte : paragraphe, titre1 et titre 2 (texte de la couleur du site), titre 3 à 6
• aligner à gauche, à droite, justifier ou centrer votre texte

 

Pour une sélection de texte

Vous pouvez, après sélection d'une chaine de caractères :

• insérer une liste à puces ou une liste numérale
• ajouter un tableau
• appliquer une mise en forme : gras, italique, souligné, indice, exposant, barré
• appliquer un format de texte en retrait

A noter : une fois votre liste créée vous pouvez augmenter le retrait en sélectionnant les entrées concernées et en appuyant sur la touche "Tabulation". Pour revenir à un seul niveau de liste après avoir sélectionné les entrées concernées, appuyer simultanément sur les touches "Tabulation" et "Majuscule ou Shift""

Pour insérer du contenu

Vous avez la possibilité d'ajouter différents contenus internes ou externes à votre texte. Des icônes spécifiques correspondent à ces éléments.

• Sélectionner le texte devant supporter le lien et cliquer sur l'icône 'Lien'
• Dans la pop-in ouverte :
  • pour un lien interne : cliquer sur le bouton 'Select content'  et sélectionner l'objet via le navigateur de contenu
  • pour une lien externe : indiquer l'url externe dans 'Link to' et nommer le lien dans 'Title'
  • Activer le bouton 'Open in tab' si vous souhaitez ouvrir le lien dans un nouvel onglet
• Valider en cliquant sur 'Save'

De manière générale, il est conseillé de sauter une ligne entre le texte et l'image si vous souhaitez y mettre un lien. Cela évitera que le lien s'insère aussi sur le texte.

4 cas différents de lien sur une image :

1. Lien vers une page interne

Pour sélectionner la page interne cible du lien, veuillez utiliser le bouton 'Select content' de la fenêtre d'insertion de lien. Un lien de type 'ezlocation' s'affiche alors. Veuillez ensuite sélectionner l'affichage dans un nouvel onglet ou non en activant ou non le bouton 'Open in tab'.

2. Lien vers une page externe

Il suffit de saisir l'url cible dans le champ 'Link to'. Veuillez ensuite sélectionner l'affichage dans un nouvel onglet ou non en activant ou non le bouton 'Open in tab'.

3. Lien vers un objet de la médiathèque de type 'Image'

En choisissant l'image cible via le bouton 'Select content', un lien de type 'ezlocation' s'affiche alors.

En FO, un tel lien fait apparaitre la souris sous forme de loupe (comme pour les diaporama). Au clic sur l'image avec le lien, l'image cible s'ouvre dans le même onglet sur un fond noir dans sa taille réelle ou en taille maximale correspondant à celle de la fenêtre de votre navigateur (si l'image est trop grande).

 

 

 

4. Lien vers une image déposée en médiathèque

Pour avoir la possibilité d'afficher une grande image dans sa taille réelle, il convient de faire un lien vers l'image déposée en médiathèque via l'adresse de cette image. Pour ce faire, placer vous l'objet image dans la médiathèque afin de voir l'image en aperçu, faites alors un clic droit sur l'image et cliquer sur 'Copier l'adresse de l'image' ou 'Copier de l'image' (selon le navigateur utilisé, les termes varient quelque peu). Dans l'adresse copiée (de ce style : https://admin-prod-demo.hub.inrae.fr/var/hub_internet_prod_demo/storage/images/4/3/9/3/3934-1-fre-FR/62d733630873-wp_15.jpg), veillez à supprimer le terme 'admin-'. 

 

Copiez alors l'adresse dans le champ 'Link to' de la fenêtre d'insertion de lien. Veuillez ensuite sélectionner l'affichage dans un nouvel onglet ou non en activant ou non le bouton 'Open in tab'. Au clic sur l'image en FO, l'image s'ouvrira en plein écran et il sera possible de l'agrandir avec l'outil 'Loupe' qui s'affiche au survol (si l'image est de petite taille, elle s'affichera simplement en taille réelle).

Une ancre est un repère dans une page vers lequel on peut faire pointer un lien (un clic sur ce lien positionne l'ancre désignée en haut à gauche de la page). Le système des ancres est, par exemple, utilisée pour ajouter en bas de page, un lien vers une ancre située en haut de la page.

• Positionner le curseur à l'endroit où vous souhaitez positionner l'ancre
• Cliquer sur l'icône 'Ancre'
• Nommer l'ancre dans la pop-in ouverte (nom simple sans espace, ni accent : ancre1, par exemple)
• Valider en cliquant sur 'Save'
• Sélectionner le texte support du lien et cliquer sur l'icône 'Lien'
• Dans 'Link to' , indiquer simplement #nomdel'ancre (dans notre exemple : #ancre1)
• Valider en cliquant sur 'Save'

Sélectionner le texte et cliquer sur l'icône 'Formate' ; le rendu est un texte brut.

La fonction 'Encapsuler' est utile pour intégrer un objet du site (file ou image) entre 2 paragraphes de texte. Elle n'a que peu d'intérêt pour l'image car on utilisera plutôt la fonction d'insertion d'image permettant plus de choix dans la taille affichée.

La fonction 'Encapsuler en ligne' est utile pour intégrer un objet du site (file ou image) sur une ligne de texte (comme un caractère). A noter, pour encapsuler une image en ligne, il convient de positionner l'image avant le texte (le texte situé avant restera au dessus de l'image). 

 

 

 

 

Exemple pour un fichier (à gauche) et pour une image (à droite)

Cliquez sur une icône 'Image' puis sélectionnez en une, via le navigateur de contenus, en parcourant l'onglet Media. Validez en cliquant sur 'Insert' dans la barre noire en bas, apparue après la sélection de l'image :

Si vous souhaitez ajouter une image qui n'est pas encore enregistrée dans la médiathèque, cliquez sur le bouton 'Téléverser' du navigateur de contenus (en haut à gauche ; choix du folder de destination possible ) ou utiliser la fonction 'Téléverser une image' de la barre d'outils. Ceci vous permet d'importer une image dans le répertoire "Images" (choix du folder impossible) et de l'insérer dans le texte. 

La taille d'insertion de l'image dans le texte est, par défaut, au format Medium (largeur : 200 px)

Mise en page de l'image

Suite à l'ajout d'une image dans un texte, une nouvelle barre de menu permet de mettre en page l'image.

De gauche à droite, ces options permettent :

• Formats de l'image : menu déroulant pour choisir la taille de l'image affichée en FO (formats prédéfinis ou original)
• Position de l'image : 
  • sans action : l'image est positionnée à gauche avec un paragraphe au dessus et un au dessous
  • alignée à gauche dans la page : le paragraphe suivant pouvant contenir du texte ou une image vient se positionner à droite 
  • centrée dans la page : l'image est centrée dans la page  : pas d'alignement des textes ou images des paragraphes environnants
  • alignée à droite dans la page : le paragraphe suivant pouvant contenir du texte ou une image vient se positionner à gauche 
• Corbeille : supprimer l'affichage de l'image (l'image est conservée en BO dans la médiathèque)

Pour faire défiler vos images dans un texte

Les images doivent être enregistrées dans un folder (dossier) de la médiathèque du site : la galerie exposera les images de ce folder dans une popup.
L'ordre d'affichage des images est celui défini dans le folder.

Comment insérer une galerie d'images ou un diaporama ?

1^ère étape : récupérez l'url du folder (dossier) qui contient les images.

2^e étape insérez le widget 

• cliquez sur 

  

Dans la fenêtre modale, configurez le widget "Galerie" :

 

• saisir l'url du folder ou dossier contenant les images
   
• choisir, dans le menu déroulant, la taille de l'image d'illustration qui s'affichera dans le texte
   
• saisir, si nécessaire,  un texte dans la zone "Légende sous l'image d'illustration" : la légende s'affichera à partir du format medium
   
• sélectionner ou pas le défilement automatique des images et définir son délai
   
• sauvegarder la saisie

Conseil : avant de publier, affichez un aperçu (bouton "Aperçu") et ajustez l'affichage en cliquant sur le titre du widget puis sur la roue crantée du menu contextuel puis sur le crayon.

Le widget « Colonnes » permet d’insérer du texte en colonnes dans une zone de texte riche. L’insertion de colonnes est cependant limitée à 2 ou 3 colonnes afin d’assurer une bonne lisibilité de chaque colonne.
Cliquer sur le widget ‘Colonnes’ puis sélectionner le nombre de colonnes souhaitées dans le menu déroulant et sauvegarder.

Colonnes de texte brut

Si vous souhaitez n’insérer que du texte simple (pas de format titre, pas d’insertion de photo ou autres widget), alors il vous suffit de coller dans le conteneur ‘Colonnes’ déjà sélectionné, un nombre de paragraphes équivalent au nombre de colonnes souhaitées. Il sera possible de mettre du texte en gras ou italique, d’insérer un lien, d’aligner le texte ainsi qu’afficher un texte avec des puces dans une des colonnes. Attention, chaque changement de paragraphe (saut de paragraphe) impliquera un changement de colonne.

 

Colonnes de texte riche

Si vous souhaitez insérer du texte enrichi (formats de titre, widget comme photo, par exemple), alors il faudra créer dans le conteneur ‘Colonnes’ déjà ouvert, un nouveau conteneur ‘Colonnes’ par colonne souhaitée. Pour ce faire, dans le conteneur déjà ouvert,, cliquez sur le crayon bleu (en haut à droite) puis dans la zone de texte vide. Cliquez de nouveau sur le « + » pour ouvrir la barre d’outils et choisissez de nouveau le widget « Conteneur ». Laissez le menu sur ‘Désactivé’ et sauvegarder. Le conteneur apparait alors, cliquez sur le crayon bleu puis insérer le texte correspondant à votre première colonne.
Procédez de même pour la deuxième et troisième colonne selon le nombre de colonne choisi au départ.

 

Ce widget permet de créer un texte en accordéon qu’il sera donc possible de plier et de déplier à volonté.
Au clic sur ce widget, une nouvelle fenêtre s’ouvre ; dans le champ vide (Texte replié), insérer le texte qui sera affiché en mode plié puis sauvegarder.

Insérer ensuite le texte qui sera visible en mode déplié dans le cadre supérieur ; toutes les fonctions de texte enrichi sont disponibles.

Pour modifier le libellé visible en mode plié ou modifier l'alignement de l'accordéon, suivez la démo vidéo ci-dessous :

Il est bien sûr possible d'enchainer plusieurs textes en accordéon, à la suite afin de faire succéder plusieurs accordéons de même niveau.

Le rendu en FO sera celui-ci :

En mode plié

En mode déplié

Il est ainsi possible d’imbriquer les textes en accordéon afin de multiplier les niveaux.

En BO

En FO

Cela permet d'isoler une image ou un widget en sautant un paragraphe.

Quel type de contenu externe peut-on insérer ?

Des contenus Google (docs / sheets / forms / agenda...), Enquêtes/Sondages Limesurvey , document pdf enregistré dans la médiathèque du site, flux généré par l'application Hal Tools INRIA, contenu Research Gate

Comment insérer un contenu externe ?

• cliquer sur l'icône "contenu externe" >> une fenêtre popup s'affiche
• renseigner les champs 
  • titre : il ne s'affiche pas dans la page web
  • largeur et hauteur qui déterminent la taille d'affichage de la vidéo dans la zone texte
  • url du contenu à insérer
  • cliquer sur le bouton Save

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" en haut de la page.

Cas des enquêtes / sondages INRAE Limesurvey

Vous pouvez désormais afficher au sein d'une page, un sondage LimeSurvey créé dans les environnements internet  (sondages.inrae.fr) ou intranet (sondages.intranet.inrae.fr) INRAE. Pour afficher un sondage créé dans un environnement hors INRAE, veuillez déclarer un ticket Ariane.

À noter : un sondage créé dans l'espace intranet ne s'affichera pas dans un site internet

 Cas particulier pour l’insertion des pdf en ligne

Vous pouvez afficher les pdf stockés dans la médiathèque directement dans une liseuse sur la page de votre site.
Placer vous, en BO, sur le fichier contenant le PDF à visualiser, puis dans l’onglet « URL » et copier l’URL système du fichier (/media/files/nomdufichier, par exemple)

Ensuite, insérer dans la page souhaitée, un widget ‘Contenu externe’, définir la largeur et la hauteur du cadre et coller l’URL dans le champ « URL »
En FO, le fichier PDF apparaît en mode lecture directement dans la page.

Comment créer un fil X ? 

• Se connecter à l'interface https://publish.twitter.com/
• Saisir l'identifiant du fil X à insérer - ex : @INRAE_France
• Sélectionner l'affichage "Embedded Timeline" : le widget défini par défaut s'affiche.

Récupérer le code IFRAME de votre fil X

• Cliquer sur le bouton  "Copy code" pour récupérer le code à intégrer au format par défaut
  à noter : il est inutile de reformater le widget dans l'interface publish de X car les propriétés 'affichage seront définies dans le  back-office de votre site

Comment intégrer le code récupéré dans le widget X ?

• cliquer sur l'icone  "X" 
• saisir un titre et définir les propriétés d'affichage du widget (largeur, hauteur, couleur du fond et présence ou absence de l'image d'illustration) puis sauvegarder
• dans la fenêtre vide, copier le code à intégrer

 

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu".

Cette fonctionnalité vous permet d'afficher des cartes issues des services OpenStreetMap, Géoportail, Geosas, Umap et Geodata INRAE

Comment générer une carte de géolocalisation ?

• Se connecter, par exemple, à l'interface https://www.google.fr/maps
• Saisir les coordonnées recherchées pour afficher la carte

Pour obtenir le code IFRAME de votre carte

• Cliquer sur le bouton "Partager" et, dans la fenêtre qui s'ouvre, sélectionner le lien "Intégrer une carte"
• Cliquer sur le lien "COPIER LE CONTENU HTML"

Comment intégrer le code dans le widget "Carte" ?

• cliquer sur l'icone "Carte" 
• dans la fenêtre de paramètres, saisir un titre et définir les propriétés d'affichage du widget (largeur, hauteur) puis sauvegarder
• dans la fenêtre vide, copier le code à intégrer

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

Prérequis

• avoir un compte Genial.ly
• ce compte peut être gratuit (données partagées sur le web) ou payant (garantie de la confidentialité des données,  le système de sécurité étant plus élevé dans la version payante).

Comment créer un contenu interactif Genial.ly ? 

• se connecter à l'interface avec son compte
• créer le visuel Genial.ly : insérer de l'interactivité dans votre contenu 

Pour obtenir le code IFRAME de votre visuel

• dans votre tableau de bord
  • Cliquer sur le bouton "Partager" qui apparaît lorsque au passage de votre souris sur la vignette de votre création. Si vous ne voyez pas cette option, c'est que votre création n'est pas encore publiée. Vous devez la publier pour pouvoir la partager.
  • Sélectionner l'onglet "Insérer" et vous verrez apparaître les deux codes, l'iframe et le script. Copier de préférence le code IFRAME
• en mode édition de votre visuel
  • Cliquer sur le bouton "Partager" qui se trouve en haut à droite de l'éditeur. Si vous ne voyez pas cette option, c'est que votre création n'est pas encore publiée. Vous devez la publier pour pouvoir la partager.
  • Sélectionner l'onglet "Insérer" et vous verrez apparaître les deux codes, l'iframe et le script. Copier de préférence le code IFRAME

Comment intégrer le code dans le widget Genial.ly ?

• cliquer sur l'icone "Genial.ly" 
• dans la première fenêtre des paramètres saisir un titre, les valeurs de la taille d'affichage du widget puis sauvegarder
• dans la fenêtre vide, copier le code à intégrer

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.

 

Prérequis

• avoir un compte Instagram

Comment créer le fil instagram ? 

• se connecter à l'interface avec son compte
• sélectionner une publication 
• via les 3 points, en haut et à droite de l'écran, sélectionner l'entrée "Intégrer" et cliquer sur le bouton "Copier le code intégré"

Comment intégrer le code dans le widget Instagram ?

• cliquer sur l'icone "Instagram" 
• dans la première fenêtre des paramètres qui s'affiche, saisir les valeurs de la taille d'affichage du widget puis sauvegarder
  à noter : actuellement ces valeurs ne sont pas prises en compte. Le fil s'affiche au format 326 X 531
• dans la fenêtre vide, copierle code à code intégrer

Quel type de vidéo peut-on insérer ?

Des vidéos hébergées sur les serveurs de la médiathèque INRAE, Canal-U, YouTube, Dailymotion ou Viméo
Si votre vidéo est hébergée sur un autre serveur nous vous conseillons de faire une image de cette vidéo et d'insérer un lien vers son URL

Comment intégrer le widget vidéo ?

• cliquer sur l'icone "video" >> une fenêtre popup s'affiche
• renseigner les champs 
  • titre : il ne s'affiche pas dans la page web
  • url de la vidéo
  • largeur et hauteur qui déterminent la taille d'affichage de la vidéo dans la zone texte
  • cliquer sur le bouton Save

Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.