L'éditeur de texte a été simplifié pour vous permettre d'ajouter des contenus dans vos éléments textuels : liens, images, objets internes etc.
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.
Différentes barres de menu sont accessibles
Pour un paragraphe
Positionné dans un paragraphe et sans sélection de texte vous pouvez :
- choisir le style de votre texte : paragraphe, titre1 et titre 2 (texte de la couleur du site), titre 3 à 6
- inclure un élément de contenu : une image (insertion au format original), un fichier à télécharger, un lien vers un dossier, un article ou un événement (intitulé du lie = titre court du type de contenu)
- insérer une ancre pour faire un lien d'une partie du texte vers cette ancre (ex: sommaire)
- aligner à gauche, à droite, justifier ou centrer votre texte
- supprimer votre texte ou contenu
D'autres fonctionnalités sont accessibles depuis l'éditeur de texte, au moyen d'un "+" visible sur la gauche:
Il est possible de :
- insérer un paragraphe simple ou au format Titre 1
- insérer une liste à puces ou une liste numérale
- insérer une image
- insérer un contenu de type image ou fichier
- insérer un tableau
- insérer des widgets pour afficher dans votre page : une vidéo, un fil instagram, une image Genial.ly, une carte de géolocalisation, un fil twitter
Pour une sélection de texte
Vous pouvez, après sélection d'une chaine de caractères :
- appliquer une mise en forme : gras, italique, souligné, indice, exposant, barré
- créer un lien vers une page du site ou une page externe
- transformer des lignes en liste à puces
- créer un retrait
Comment Insérer un format spécifique ou un contenu interne au site ?
Vous avez la possibilité d'ajouter différents éléments à votre texte. Des icônes spécifiques correspondent à ces éléments.
Insertion d'une liste à puces ou numérale
Une fois votre liste créée vous pouvez créer un deuxième niveau en sélectionnant les entrées concernées et 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""
Insertion d'une image via l'icône "Image"
Puis sélectionnez une image, via le navigateur de contenus, en parcourant l'onglet Media :
Si vous souhaitez ajouter une image qui n'est pas encore enregistrée dans la médiathèque, cliquez sur l'onglet "créer" du navigateur de contenus. Ceci vous permet d'importer une image dans le répertoire "Images" et de l'insérer votre image dans le texte de votre élément de contenu.
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 :
- Les flèches : déplacer l'image d'un paragraphe à l'autre en montant ou en descendant
- Icône image : changer l'image
- Formats de l'image : menu déroulant pour choisir la taille de l'image affichée en FO (formats prédéfinis ou original)
- Lien : insérer un lien hypertexte sur l'image
- Ancre : définir l'image comme une ancre
- 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)
Insertion d'un contenu
Cette fonctionnalité est, généralement, utilisée pour insérer un fichier à télécharger dans la zone texte. Deux possibilités sont proposées :
- Inclure un fichier au sein d'un texte
Cliquez sur l'icône Inclure de la barre de menu propre au paragraphe
Puis sélectionnez, dans le navigateur de contenus, le fichier à insérer dans le texte
Restitution : le lien vers le téléchargement affiche l'icône Fichier et le titre du fichier tel qu'il a été défini en back-office.
Ce lien peut-être intégré dans une chaine de caractère
- Inclure un fichier au sein d'un nouveau paragraphe
Cliquez sur le "+" puis sur l'icône Inclure
Sélectionnez, comme décrit ci-dessus, le contenu à insérer dans un nouveau paragraphe de votre texte
Restitution : le lien vers le téléchargement affiche l'icône fichier, le titre, le type et le poids de ce fichier
Dans cette configuration, vous avez accès à une barre de menu vous permettant de positionner le lien par rapport au autres paragraphes :
- 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
Insertion d'autres types de contenus internes
De la même façon vous pouvez insérer :
- une image mais attention vous ne pourrez pas choisir une format d'affichage
- un contenu de type article, événement, dossier, rubrique de tête : la restitution en FO affichera un lien basé sur le titre court du contenu
Insertion d'un saut de ligne
Cela permet d'isoler une image ou un widget en sautant un paragraphe.
Insérer une vidéo
Quel type de vidéo peut-on insérer ?
Des vidéos hébergées sur les serveurs de la médiathèque INRAE, 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 les icones "+" et "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 Sauvegarder
Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.
Insérer un fil Instagram
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 les icones "+" et "instagram"
- dans la première fenêtre 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 nommée Instagram, cliquer sur le crayon bleu pour accéder à la zone de saisie du code intégré
Insérer un contenu Genial.ly
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 les icones "+" et "Genial.ly"
- dans la première fenêtre saisir un titre, les valeurs de la taille d'affichage du widget puis sauvegarder
- dans la fenêtre nommée Genial.ly, cliquer sur le crayon bleu pour accéder à la zone de saisie du code intégré
Avant de publier votre saisie vous pouvez afficher un aperçu de votre page web via le bouton "Aperçu" du menu de droite.
Insérer une carte de géolocalisation
Actuellement, cette fonctionnalité vous permet d'afficher une carte du service Google Maps.
À venir : cartes issues des services OpenStreetMap et Géoportail
Comment générer une carte de géolocalisation ?
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 les icones "+" et "Carte"
- dans la première fenêtre saisir un titre et définir les propriétés d'affichage du widget (largeur, hauteur) puis sauvegarder
- dans la fenêtre nommée Carte, cliquer sur le crayon bleu et 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.
Insérer un fil twitter
Comment créer un fil twitter ?
- Se connecter à l'interface https://publish.twitter.com/
- Saisir l'identifiant du fil twitter à insérer - ex : @INRAE_France
- Sélectionner l'affichage "Embedded Timeline" : le widget twitter défini par défaut s'affiche.
Récupérer le code IFRAME de votre fil twitter
- 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 twitter 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 twitter ?
- cliquer sur les icones "+" et "Twitter"
- dans la première fenêtre 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 nommée Twitter, cliquer sur le crayon bleu et 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.
