Guide utilisateur - CMS

5.2 - 01/09/2018

Introduction

Lors de la conception de votre Site Internet, nous mettons à votre disposition un module d’administration qui se retrouve principalement dans ces pages web sous les initiales CMS1.

1 Les initiales CMS signifie en Anglais “Content Management System” qui se traduit en français par “Système de gestion de contenu”. Nous utiliserons ces initiales dans l’entièreté de cette aide.

Notre CMS est séparé en différents modules qui vous permettent de :

  • Lister & rechercher
  • Ajouter
  • Consulter
  • Modifier
  • Supprimer

Ces différents modules vous sont expliqués dans ce guide utilisateur fournis avec votre CMS. Il est soit livré lors de la mise en ligne de votre Site Internet, soit directement sur votre CMS si vous avez déjà accès à celui-ci, soit à la demande en cas de perte ou pour lire avant la première mise en route de votre Site Internet.

Ce guide utilisateur se compose comme suit :

  • Accès au CMS
  • Tableau de bord
  • Gestion des données
  • TinyMCE (Éditeur de contenu)
  • Gestionnaire de fichiers

Pour toutes autres informations complémentaires, un formulaire de contact se trouve à votre disposition dans votre CMS. Nous traitons en priorité les questions posées via ce formulaire.

Connexion au CMS

Lors de la mise en ligne de votre Site Internet, vous recevez une url2 vous permettant d’afficher votre Site Internet : www.webpassions.be

2 Une URL est une adresse électronique qui permet de localiser un Site Internet, et qui indique la méthode pour y accéder, exemple d’url : https://www.webpassions.be

Pour accéder à votre CMS, il faut ajouter connexion-cms à cette url. Dans ce cas ci, l’url de connexion sera : www.webpassions.be/connexion-cms

Lors de la validation de cette url dans votre navigateur Internet, un écran de connexion s’affiche à vous.

Cet écran vous propose deux champs de saisies et un bouton Se connecter qui permet de valider le formulaire 3 de connexion.

3 Un formulaire permet d’encoder toutes une série d’informations et de les soumettre à votre CMS qui traitera les données encodées dans ce formulaire.

Pour vous connecter au CMS, vous devez avoir reçu au préalable un couple de login/mot de passe envoyé par email lors de la mise en ligne de votre Site Internet.

Si vous validez le formulaire à l'aide du bouton Se connecter, le CMS peut dans certains cas vous envoyer un avertissement, les messages affichés sont suffisamment explicites pour vous permettre de corriger cet avertissement.

Cas possible

  • Dans l’image suivante, le formulaire a été validé avec des champs de saisies non remplis, un message d’avertissement s’affiche à vous comme ci-dessous.
  • Après la validation du formulaire correctement rempli, les champs de saisies sont envoyés au CMS qui vérifie votre login/mot de passe, si un des deux est erroné, un message d’erreur s’affiche, et il faudra recommencer la tentative de connexion.
  • Lors d’une connexion réussie à votre CMS, le tableau de bord de celui-ci s’affiche à vous, voir le chapitre Tableau de bord pour l’explication de cet écran.

Tableau de bord

Une fois que vous êtes connecté à votre CMS. La première chose que vous pouvez visualiser est la page ci-dessous.

Comme vous pouvez le voir sur l’image ci-dessus, l’écran est séparé en 2 parties. La première partie sur fond bleu est le menu de votre CMS. Il y a de forte chance que votre menu ne corresponde pas à celui présenté ci-dessus.

Mais cela dépend des modules voulus lors de la conception de votre Site Internet. Néanmoins le fonctionnement reste parfaitement identique, peu importe le nom ou le nombre de modules disponible dans votre CMS.

La deuxième partie de l’écran sur fond blanc recevra toutes les autres possibilités que votre CMS peut vous offrir.

Dans le cas du Tableau de bord, il vous indique la date de votre dernière connexion et vous offre quelques informations sur le contenu de votre Site Internet ainsi que certains liens directs pour ajouter des données. Il comporte également une série d’informations pouvant vous aider dans vos démarches.

Menu du CMS

Dans ce chapitre nous allons nous intéresser particulièrement au menu de votre CMS.

Il contient un onglet principal qui se nomme WebPassions ensuite viennent les onglets correspondant aux modules voulus avec votre Site Internet (Cela change en fonction de chaque Site Internet), le dernier onglet Media est expliqué dans la suite de ce document.

Dans la suite de ce chapitre nous allons expliquer en détail le premier onglet de ce menu. L’onglet WebPassions.

Lors du clic sur cet onglet, un menu déroulant se présente à vous avec plusieurs possibilités.

Changer votre mot de passe

Cet écran vous offre la possibilité de changer votre mot de passe, le nouveau mot de passe sera actif lors de votre prochaine connexion au CMS.

Cet écran se compose de deux champs text4 permettant d’entrer votre nouveau mot de passe ainsi qu’une vérification. Sous ces deux champs text, un groupe de boutons, un bouton Retour vous permettant de revenir sur votre Tableau de bord et un bouton Modifier pour valider le formulaire.

4 Le champ text est expliqué en détail dans le chapitre consacré à l’ajout de données.

Si vous validez le formulaire à l'aide du bouton Modifier, le CMS peut dans certains cas vous envoyer un avertissement, les messages affichés sont suffisamment explicites pour vous permettre de corriger cet avertissement.

Cas possible

  • Dans l’écran ci-dessous, le formulaire a été validé avec des champs non remplis, comme vous pouvez le constater, le CMS vous affiche un message Veuillez renseigner ce champ comme avertissement.
  • Après la validation du formulaire, les champs sont envoyés au CMS qui vérifie les deux mots de passe entrés. Si cette vérification est erronée, un message d’erreur s’affiche, et il faudra recommencer.
  • Lors d’une validation correcte, un message vous spécifie la réussite de votre modification, votre mot de passe sera donc actif lors de votre prochaine connexion au CMS.

Contact

Cet écran vous offre un formulaire de contact pour pouvoir directement entrer en contact avec notre équipe. Nous traitons en priorité les questions/demandes posées via ce formulaire.

Ce formulaire contient un champ select5 contenant le sujet du mail qui peut être :

5 Le champ select est expliqué en détail dans le chapitre consacré à l’ajout de données.
  • Aide (Aide quelconque sur le CMS)
  • Nouvelle fonctionnalité (Nouveau développement pour votre CMS)
  • Bug6
  • Autres (Pour toutes autres demandes)
6 Un bug correspond à une erreur, un défaut que vous pourriez rencontrer en utilisant votre CMS.

Sous cette sélection se trouve un éditeur de texte, expliqué en détail dans le chapitre TinyMCE. Ainsi qu’un champ checkbox7, vous permettant de recevoir une copie ou non de cet email.

7 Le champ checkbox est expliqué en détail dans le chapitre consacré à l’ajout de données.

Ainsi qu’un groupe de boutons, un bouton Retour vous permettant de revenir sur votre Tableau de bord et un bouton Envoyer qui vous permet de valider le formulaire et de nous envoyer un mail avec votre demande. Si vous validez le formulaire à l'aide du bouton Envoyer, le CMS peut dans certains cas vous envoyer un avertissement, les messages affichés sont suffisamment explicites pour vous permettre de corriger cet avertissement.

Cas possible

  • Dans l’écran ci-dessous, le formulaire a été validé avec la zone de contenu non remplie, comme vous pouvez le constater, le CMS vous affiche une erreur. Il suffit de mettre du contenu dans le message pour pouvoir valider le formulaire.
  • Lors d’une validation correcte, un message de validation vous spécifie la réussite de votre envoi, votre requête sera traitée dans un délai le plus court possible.

Configuration

Cet écran comporte toute une série de paramètres relatifs à votre société mais également des paramètres techniques pour nous aiguiller lors d’un bug ou problème éventuel. Les paramètres relatifs à votre société sont repris sur votre Site Internet, comme par exemple votre numéro de téléphone ou votre adresse postale. Attention donc aux informations que vous donnez.

Pour pouvoir modifier une des ces informations, il vous suffit de cliquer sur le bouton Modifier se trouvant sur la droite de l’information.

Cet écran se compose d’un seul champ text permettant d’entrer l’information voulue. Sous ce champ text, un groupe de boutons, un bouton Liste vous permettant de revenir sur l’écran des propriétés de configurations et un bouton Modifier qui vous permet de valider le formulaire.

Si vous validez le formulaire à l'aide du bouton Modifier, le CMS peut dans certains cas vous envoyer un avertissement, les messages affichés sont suffisamment explicites pour vous permettre de corriger cet avertissement.

Cas possible

  • Dans l’écran ci-dessous, le formulaire a été validé avec un champ non rempli, comme vous pouvez le constater, le CMS vous affiche un message Veuillez renseigner ce champ comme avertissement.
  • Lors d’une validation correcte, un message vous spécifie la réussite de votre modification, l’information est directement disponible sur votre Site Internet et dans votre CMS.

Page d'accueil Site Internet

Ce lien du menu vous permet d'accéder directement à la page d’accueil de votre Site Internet en laissant votre session8 active pour votre CMS dans le cas où vous souhaiteriez toujours y accéder par la suite.

8 Une session est une utilisation de votre CMS que vous créez lors de votre connexion et que vous supprimez lors de la déconnexion. Durant cette session, vous pouvez effectuer toutes une série d’opérations.

Déconnexion

Ce lien du menu vous permet de quitter la session ouverte dans votre CMS. Méthode conseillée car la fermeture de votre navigateur Internet ne ferme pas la session en cours et une autre personne utilisant le même ordinateur pourrait modifier des données dans votre session.

Gestion des données

Un CMS a comme principale tâche de gérer les données contenues sur votre Site Internet. Pour ce faire, nous mettons à votre disposition des écrans ayant des fonctionnalités prédéfinies.

  • Liste & Recherche
  • Création
  • Consultation
  • Modification
  • Suppression

Liste & Recherche

Nous allons dans ce document voir les écrans de liste et la fonctionnalité de recherche s’y associant. Pour accéder à ces écrans de liste, il faut obligatoirement passer par le menu de votre CMS situé sur le dessus de la page.

Peu importe le module choisi, les listes sont toutes construites de la même manière, une explication sur un seul module permet de comprendre tous les autres mis à votre disposition. Nous allons prendre le module Nouvelles pour vous expliquer toutes ces possibilités. Lorsque vous aurez cliqué sur la partie “Nouvelles” du menu, un écran de liste s’affiche à vous.

Voici donc un écran complet de liste.

Lors du premier affichage de cette liste, nous affichons par défaut 10 nouvelles avec un tri dernier ajouté, premier dans la liste. En effet, dans chaque écran de liste du CMS, nous affichons toujours 10 enregistrements triés par ordre descendant sur leur date de création, une fois que vous changez cette recherche ou ce tri, votre CMS gardera celui-ci en mémoire durant toute la durée de votre session.

A l’intérieure de ce panneau, on retrouve un champ select dans le haut de celui-ci, une première partie qui permet d’afficher 10, 25, 50, 100 nouvelles à la fois.

Ensuite sur la droite, nous avons un champ text qui permet d’entrer une valeur qui sera recherchée sur les données disponibles dans votre CMS pour vous permettre d’affiner vos nouvelles. Chaque fois qu’une touche de votre clavier est enfoncée, la recherche s'exécute et affiche les nouvelles correspondantes. Voici un exemple avec la lettre P dans la section recherche. Le nombre de nouvelles passe de 12 à 1 automatiquement. Vous pouvez voir cela dans la partie basse de votre panneau consacré à la pagination.

Dans le bas de ce panneau, nous retrouvons donc la pagination.

Elle vous permet de naviguer dans la liste des écrans. Si le nombre de nouvelles disponibles est supérieur à celui qui est possible d’afficher dans la liste, alors un deuxième écran de pagination sera créé automatiquement.

Dans le cas ci-dessous, nous avons 12 nouvelles mais la liste n’en affiche que 10, nous nous retrouvons donc avec deux écrans de pagination. Les boutons Précédent et Suivant ainsi que les numéros des écrans sont cliquables pour naviguer dans les différents écrans de nouvelles.

Cet écran vous offre également la possibilité de trier par ordre croissant et décroissant ou alphabétique les nouvelles comprises dans la liste. Pour cela, il vous suffit de cliquer sur le titre de la colonne que vous souhaitez trier.

Dans un écran de liste comme celui-ci, vous avez la possibilité d’effectuer plusieurs actions sur les données contenues dans cette liste. Toutes ces actions sont accessibles par des simples boutons à cliquer.

Cas possible

  • Le bouton Visible ou Caché a pour but de changer l’état de votre nouvelle, en la rendant disponible ou non sur votre Site Internet. Lorsque ce statut est changé, le bouton Visible passe du vert au rouge avec le statut Caché.
  • Le bouton Consulter vous permet d’afficher un second écran qui reprendra toutes les informations disponibles pour la nouvelle souhaitée.
  • Le bouton Modifier vous permet comme pour le Consulter d’afficher toutes les informations disponibles pour la nouvelle voulue en offrant la possibilité de changer le contenu de celle-ci.
  • Le bouton Supprimer vous permet comme pour la consultation d’afficher toutes les informations disponibles pour la nouvelle voulue en offrant la possibilité de la supprimer.
  • Le bouton Ajouter vous permet d’afficher un second écran qui vous permettra d’encoder toutes les informations utiles pour la création de votre nouvelle.

Création

Pour accéder à ces écrans de création, il faut obligatoirement passer par le bouton Ajouter se trouvant sur le haut de l’écran de liste vu dans le chapitre précédent.

Une fois la création demandée, cet écran s’affiche à vous.

Dans le bas de ce panneau, nous retrouvons un bouton Liste qui vous permet simplement de revenir sur l’écran de liste. Et un bouton Ajouter qui permet de créer votre nouvelle.

Dans cet écran, nous retrouvons plusieurs types de champs qui sont éditables ou non. Dans la suite de ce chapitre, nous allons passer en revue tous les types de champs possibles dans votre CMS pour vous préparer à l’encodage de n’importe quelle donnée.

  • Champ text

    Il vous offre la possibilité d’y ajouter du texte. Lors de l’ajout d’un champ text si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ text est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Le formulaire ne se validera qu’une fois que tous les champs obligatoires seront remplis.
  • Champ password

    Il se présente comme un champ text et fonctionne de la même manière. La différence entre ces deux champs se trouve dans l’affichage de ce que vous écrivez. Dans un champ password, ce sont des bulles noires qui s’affichent pour masquer vos caractères. Le champ password est toujours obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Le formulaire ne se validera qu’une fois que tous les champs obligatoires seront remplis.
  • Champ mail

    Il se présente comme un champ text et fonctionne de la même manière. La différence entre ces deux types est dans le contrôle de ce que vous écrivez. Dans un champ mail, il faut absolument trouver un @ ainsi qu’une terminaison comme .be, .com, … Lors de l’ajout d’un champ mail si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ mail est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Si le champ est rempli mais contient une information ne correspondant pas à un email type, une autre message d’avertissement s’affiche à vous, en vous proposant de corriger correctement cette adresse email.
    Le formulaire ne se validera qu’une fois que tous les champs obligatoires seront remplis.
  • Champ number

    Il vous permet d’encoder des nombres entiers entre une valeur minimale et une valeur maximale. Seuls les chiffres sont acceptés dans ce champ number. Lors de l’ajout d’un champ number, si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Si le champ est rempli mais contient autre chose que des chiffres, un autre message d’avertissement s’affiche à vous, en vous proposant de corriger correctement ce nombre.
    Si vous entrez une valeur inférieure ou supérieure au minimum-maximum autorisé, un autre message d’avertissement s’affiche à vous, en vous proposant de corriger correctement ce nombre.
    Le formulaire ne se validera qu’une fois que tous les champs obligatoires seront remplis.
  • Champ decimal

    Il vous permet d’encoder des chiffres entre une valeur minimale et une valeur maximale. Seuls les chiffres sont acceptés dans ce champ. Ces chiffres peuvent avoir une valeur décimale contrairement au champ number qui ne peut contenir que des nombres entiers. Lors de l’ajout d’un champ decimal, si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Si le champ est rempli mais contient autre chose que des chiffres, un autre message d’avertissement s’affiche à vous, en vous proposant de corriger correctement ce nombre.
    Si vous entrez une valeur inférieure ou supérieure au minimum-maximum autorisée, un autre message d’avertissement s’affiche à vous, en vous proposant de corriger correctement ce nombre.
    Le formulaire ne se validera qu’une fois que tous les champs obligatoires seront remplis.
  • Champ image

    Il est de couleur grisée car le CMS ne permet pas l’écriture dans ce champ. Il faut obligatoirement passer par l’icône représentant un appareil photo. Lors du clic sur cette icône, on ouvre un Gestionnaire de fichiers qui nous permet de choisir une photo se trouvant dans notre propre bibliothèque d’images. Le gestionnaire de fichiers est expliqué en détail dans un chapitre suivant. Lorsque vous avez sélectionné votre image à l’aide du Gestionnaire de fichiers, le champ image contient le chemin où se trouve notre image sur le Site Internet. Ce chemin est impossible à changer pour des raisons de consistance des données.
  • Champ date

    Il vous permet d’encoder des dates de deux manières différentes. Seuls les chiffres sont acceptés dans ce champ. Lors de l’ajout d’un champ date, si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Lorsque nous cliquons sur un champ date, nous pouvons soit remplir manuellement la date que nous souhaitons en remplaçant les jj par les jours, en remplaçant les mm par les mois et en remplaçant les aaaa par les années. La seconde utilisation du champ date est de cliquer sur la flèche se trouvant sur la droite de ce champ. Dans ce cas une aide s’affiche pour sélectionner la date voulue
    Ce calendrier permet de naviguer dans les mois et les années. Ainsi que de sélectionner le jour que l’on souhaite afficher dans le champ.
  • Champ datetime

    Il vous permet d’encoder des dates et une heure de deux manières différentes. Seuls les chiffres sont acceptés dans ce champ. Lors de l’ajout d’un champ datetime, si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous comme ci-dessous.
    Lorsque nous cliquons sur un champ datetime, nous pouvons soit remplir manuellement la date que nous souhaitons en remplaçant les jj par les jours, en remplaçant les mm par les mois et en remplaçant les aaaa par les années. La seconde utilisation du champ datetime est de cliquer sur la flèche se trouvant sur la droite de ce champ. Dans ce cas une aide s’affiche pour sélectionner la date voulue.
    Ce calendrier permet de naviguer dans les mois et les années. Ainsi que de sélectionner le jour que l’on souhaite afficher dans le champ datetime, les heures doivent être encodées manuellement.
  • Champ select

    Les champs select sont tous obligatoires, par défaut ils présélectionnent la première catégorie disponible dans la liste. Cela permet d’ajouter dans ce cas-ci une catégorie Une à notre nouvelle.
  • Champ checkbox

    Les champs checkbox ne sont pas obligatoires, par défaut ils ne sont pas cochés. Pour cocher cette case, il suffit de cliquer sur celle-ci.
  • Champ url

    Il se présente comme un champ text et fonctionne de la même manière. La différence entre ces deux champs se trouve dans le contrôle de ce que vous écrivez. Dans un champ url, il faut absolument trouver le début d’une URL http://www ainsi qu’une terminaison comme .be, .com, … Lors de l’ajout d’un champ url si le libellé de ce champ est noir, le champ est non obligatoire, par contre si le champ est souligné et de couleur rouge cela signifie que ce champ email est obligatoire, si vous validez le formulaire en ayant oublié un de ces champs, un message d’avertissement s’affiche à vous.
    Si le champ est rempli mais ne correspondant pas à une url type, un message d’erreur s’affiche à vous, en vous proposant de corriger correctement cette URL.
    Le formulaire se validera quand tous les champs obligatoires seront remplis.

Consultation

Pour accéder à ces écrans de consultation, il faut obligatoirement passer par le bouton Consulter se trouvant sur l’écran de listing.

Une fois la consultation demandée, cet écran s’affiche à vous.

Tous les champs de cet écran sont grisés (non éditables) comme nous nous trouvons sur un écran de consultation. Dans le bas de ce panneau, nous retrouvons un bouton Liste qui vous permet simplement de revenir sur l’écran de liste.

Modification

Pour accéder à ces écrans de modification, il faut obligatoirement passer par le bouton Modifier se trouvant dans la liste de l’écran de listing vu dans un chapitre précédent.

Une fois la modification demandée, cet écran s’affiche à vous.

Dans cet écran, nous retrouvons plusieurs champs qui sont éditables ou non. Tous ces champs ainsi que la manière de les remplir et les avertissements qu’ils peuvent provoquer sont expliqués dans le chapitre Création. Dans le bas de ce panneau, nous retrouvons un bouton Liste qui vous permet simplement de revenir sur l’écran de liste. Et un bouton Modifier qui permet de modifier votre nouvelle.

Lorsque tous les champs demandés sont correctement encodés, le formulaire modifiera votre nouvelle et affiche un message de confirmation.

Suppression

Pour accéder à ces écrans de suppression, il faut obligatoirement passer par le bouton Suppression se trouvant dans la liste de l’écran de listing vu dans un chapitre précédent.

Une fois la suppression demandée, cet écran s’affiche à vous.

Tous les champs de cet écran sont non éditables comme nous nous trouvons sur un écran de suppression. Dans le bas de ce panneau, nous retrouvons un bouton Liste qui vous permet simplement de revenir sur l’écran de liste. Et un Bouton Supprimer qui permet de supprimer votre nouvelle. Une fois la nouvelle supprimée, le CMS vous redirige vers l’écran de liste. La nouvelle venant d’être supprimée ne se trouve plus dans cette liste.

Tiny MCE

TinyMCE est un éditeur de texte minimaliste contenant toutes les mises en page pour un environnement Web.

Cet éditeur est développé en Javascript/HTML, c'est un logiciel Open Source sous licence LGPL. Il permet d'ajouter du style (gras, italique, aligné à droite...) sur un texte ou bien d'insérer un lien, une image ou une vidéo. Les outils utilisés sur cet éditeur de texte sont très proches des outils Word, c'est pourquoi la prise en main de l'outil est simple.

Cet éditeur de texte est disponible lors de l’ajout ou de la modification des données, ainsi que dans certains formulaires de contact.

Nous allons vous expliquer toutes les possibilités qu’offre TinyMCE. Comme vous pouvez le voir sur l’écran ci-dessus, nous avons un menu ainsi qu’une barre de commande comportant plusieurs options de modifications de texte. Certaines de ces options se retrouvent dans le menu et inversement. Nous vous les expliquerons donc une fois mais nous ferons bien entendu le lien entre les deux façons d’y accéder.

Le premier onglet de la barre de menu correspond à Fichier dans ce menu nous retrouvons l’option Nouveau document, elle vous permet de remettre à zéro tout le contenu de votre éditeur. Attention à ne pas perdre votre travail en cochant cette option. La seconde option Imprimer permet comme son nom l’indique d’imprimer le contenu de votre éditeur dans le gestionnaire d’imprimante de votre navigateur Internet.

Le second onglet Éditer vous offre l’option d’annuler la dernière modification entreprise dans votre éditeur ou de rétablir la dernière modification effectuée.

Ensuite nous retrouvons les traditionnelles Copier, Coller et Couper qu’il ne me semble pas n écessaire d’expliquer.

L’option suivante Coller comme texte est utile si vous copier du texte venant d’Internet avec une mise en page particulière qui ne vous intéresse pas.

Cette fonction Coller comme texte vous donnera uniquement le texte sans les différents styles, comme la couleur, l’image, le texte en gras ou en italique, pouvant se trouver dans le texte initial que vous avez copié.

L’option Tout sélectionner vous permet de copier en une fois tout le contenu de votre éditeur de texte, cela peut éviter de scroller pour effectuer une sélection complète de votre contenu.

La dernière option de ce menu Trouver et remplacer.

Cette fonctionnalité vous permettra soit de rechercher un mot dans le contenu de votre éditeur ou de le remplacer par le mot se trouvant dans le champ texte s’y associant. Si le texte ou le mot recherché est introuvable, une autre popup vous le spécifiera.

Les boutons Remplacer et Tout remplacer sont grisés et inactifs si la recherche n’aboutit pas. Si la recherche trouve une correspondance dans votre éditeur, les boutons seront rendus actifs.

L’onglet Voir comme montré ci-dessous vous offre la possibilité de mettre en plein écran votre éditeur de texte pour une plus grande aisance dans votre travail d’édition. Et il vous permet également de prévisualiser le rendu de votre travail dans une page blanche sans les menus et autres outils.

L’onglet suivant concerne le Format, cela permet le formatage de votre contenu.

Il permet de mettre en forme votre texte en gras, en italique, de le souligner, de le barrer, de mettre des exposants ou des indices. Mais également d’y appliquer des formats prédéfinis comme des titres, des paragraphes.

La dernière option permet de retirer la mise en forme du texte préalablement sélectionné.

L’onglet Tableau, permet d’insérer un petit tableur qui gérera le nombre de lignes et le nombre de colonnes que vous souhaitez.

Il vous permettra de choisir la largeur/longueur de vos cellules, le nombre de lignes ou de colonnes mais également d’appliquer le style que vous souhaitez y associer.

L’onglet Outils, permet de visualiser le code HTML généré par l’éditeur de texte. Ceci est utile surtout pour nous permettre de voir les problèmes éventuels de mise en page.

Cette option est relativement peu utile pour vous. Le fait de travailler dans cet outil peut engendrer de gros problèmes de mise en page.

La barre d’outils en dessous du menu vous offre également quelques options de mise en page comme aligner le texte à gauche, le centrer, aligner à droite ou le justifier. Il vous permet également d’ajouter des listes à puces ou numérotées, mais aussi de décaler votre texte à gauche ou à droite avec les deux dernières icônes de l’image ci-dessus.

Le menu Insérer ainsi que les 3 icônes entourées d’un cadre noir concernent l’ajout de liens, d’images et de vidéos.

Nous allons commencer dans un premier temps avec l’option Insérer/modifier un lien. Cette action aura pour but d’afficher un nouveau popup.

Cette boîte de dialogue vous permet de retourner un texte avec un lien hypertexte.

URL, ce champ est obligatoire et doit contenir une url complète de la sorte https://www.webpassions.be , cela peut également être un lien vers une page de votre Site Internet. Ce champ comporte également un bouton sur la partie droite. Ce bouton permet d’ouvrir une nouveau popup Gestionnaire de fichiers, ce popup est expliqué en détail dans le chapitre suivant. Mais il permet de retourner l’url d’un document ou d’une image. Attention de ne pas modifier cette url pour le bon fonctionnement de celle-ci.

Texte à afficher, ce champ est également obligatoire et se remplit par défaut avec l’URL encodée. Mais il est tout à fait possible de mettre le texte que l’on souhaite.

Titre, ce champ n’est pas obligatoire, il est invisible à vos utilisateurs mais utile pour les moteurs de recherche qui aiment ce genre de détails pour le référencement naturel. Je ne peux que vous conseiller de mettre le même titre que le texte à afficher.

Cible, la cible ne contient qu’une seule valeur de sélection qui permet d’ouvrir le lien dans une nouvelle page Internet pour ne pas fermer la page de votre Site Internet en cours.

Le bouton Ok permet de valider votre lien qui sera dans ce cas affiché en bleu et souligné dans votre éditeur de texte.

Le bouton Annuler efface le lien hypertexte de votre éditeur.

Le second lien du menu Insérer est Insérer/modifier une image. Comme pour les liens, cette action aura pour but d’afficher un nouveau popup.

Cette boîte de dialogue vous permet de retourner une image.

Source, ce champ est obligatoire et doit contenir une url complète de la sorte https://www.webpassions.be/utils/images/header_bg.png. Ce champ comporte également un bouton sur la partie droite. Ce bouton permet d’ouvrir un nouveau popup Gestionnaire de fichiers, ce popup est expliqué en détail dans le chapitre suivant. Mais elle permet de retourner l’url d’une image. Attention de ne pas modifier cette url pour le bon fonctionnement de celle-ci.

Description, ce champ n’est pas obligatoire, il est invisible à vos utilisateurs mais utile pour les moteurs de recherche qui aiment ce genre de détails pour le référencement naturel. Je ne peux que vous conseiller de mettre une description claire de l’image.

Dimensions, les dimensions sont automatiquement adaptées à la taille de l’image entrée, il est possible de changer cette taille qui calcule automatiquement la proportion idéale si la case à cocher Conserver les proportions est cochée.

Dans l'insertion d’image, il y a un second onglet “Avancé” qui permet d’éditer le style de l’image affichée.

Il est possible de mettre un espacement vertical ou horizontal ainsi qu’une bordure à cette image.

Si vous remplacez une ou plusieurs de ces options, elles s’adaptent automatiquement dans le champ style.

Le champ style est modifiable, mais nous vous conseillons de ne pas modifier son contenu ou d’ajouter vous-même du contenu car cela risque de provoquer des problèmes d’affichage.

Le bouton Ok permet de valider votre image qui sera dans ce cas affichée dans votre éditeur de texte.

Le bouton Annuler permet de fermer le popup en cours

Le troisième et dernier lien du menu Insérer permet Ajouter une vidéo Youtube. Nous avons décidé d’utiliser uniquement Youtube car il offre une plate forme gratuite avec une consistance dans l’hébergement vidéo et une garantie de 7j/7. Comme pour les liens, cette action aura pour but d’afficher un nouveau popup.

Pour ajouter une vidéo à votre Site Internet, cet outil vous offre un champ texte Recherche qui comme son nom l’indique vous permet d’effectuer une recherche à partir de cet outil. Soit en y ajoutant des mots clés comme l’utilisation de Youtube proprement dit. Soit en y ajoutant une url https://www.youtube.com/watch?v=8UVNT4wvIGY directement prise de votre navigateur Internet.

Si nous effectuons ce copier coller dans la recherche, nous obtiendrons l’écran suivant.

Une liste de résultat dans la partie gauche de l’écran. Si on souhaite prévisualiser la vidéo il suffit de cliquer sur une de la liste et elle s’affiche dans la partie droite de l’écran comme vous pouvez le voir dans l’écran ci-dessus.

Par défaut la taille d’une vidéo youtube est de 640*385. Ceci étant la taille idéale, il vous est néanmoins possible d’agrandir ou de rétrécir cela via les champs texte Longueur et Hauteur.

Le champ Titre est automatiquement rempli avec le titre de la vidéo sélectionnée. Mais comme pour les champs de taille, il est également possible de changer son contenu.

Le bouton Ajouter et fermer permet de valider votre vidéo qui sera dans ce cas affichée dans votre éditeur de texte.

Le bouton Annuler permet de fermer le popup en cours sans ajouter de vidéo à votre éditeur TinyMCE.

Gestionnaire de fichiers

Le gestionnaire de fichier peut-être appelé soit directement à partir du menu avec l’onglet Media dans ce cas il vous permettra uniquement de gérer son contenu.

Soit via un éditeur de texte TinyMCE comme expliqué dans le chapitre précédent

Soit dans un écran de Création ou de Modification

Dans ces deux derniers cas, le Gestionnaire de fichiers permet également de gérer vos fichiers mais aussi de donner un fichier de retour comme une image ou un un document à votre éditeur de texte ou écran de Création ou Modification

Peu importe la manière utilisée, cela aura pour objectif de vous ouvrir un nouveau popup. Lors de votre premier affichage, vous trouverez un gestionnaire de fichiers vide. Pour notre exemple, notre Gestionnaire de fichiers comporte déjà deux dossiers.

A partir de cet endroit vous pouvez gérer vos fichiers et dossiers comme bon vous le semble. Nous vous conseillons néanmoins de garder une certaine structure facile à gérer pour pouvoir vous y retrouver facilement. Pour créer des nouveaux fichiers et dossiers, il vous suffit de cliquer sur une de ces deux icônes entouré d’un cadre noir.

La première icône correspond à l’ajout de fichier, la seconde à la création de dossier. Si nous sélectionnons la création de dossier, un popup s’affiche à nous pour entrer le nom de notre futur dossier.

Comme dis plus haut vous gérez vous même le nom des dossiers. Nous conseillons cependant d’éviter les caractères accentuées, espaces et majuscules dans les noms pour un fonctionnement optimale du gestionnaire. Après l’ajout de notre premier dossier la présentation de notre gestionnaire de fichiers peut-être affiché de 3 façons possibles.

Cela est rendu possible avec les 3 icônes suivantes entourées d’un cadre noir. La première icône, affiche les fichiers et dossiers de la manière suivante.

Pour modifier et supprimer un fichier et dossier, il faut survoler celui-ci, les options s’afficheront lors du survol de la souris.

La seconde icône permet d’afficher par liste, avec cette vue nous pouvons voir le type de fichier et dossier, sa taille, la date de création ainsi que les dimensions si c’est une image, mais également la possibilité de modifier et supprimer.

La dernière icône permet d’afficher une vue par colonne qui est comme la liste mais sans les informations de taille, de création. Seules les options modifier et de supprimer sont disponibles.

Pour ajouter un fichier dans votre Gestionnaire de fichiers il faut cliquer sur la première icônes des actions de création. Lors de la sélection de la première icône, le gestionnaire de fichier vous propose un nouvel écran.

Pour l’ajout de fichiers, il vous suffit de glisser déposer un ou plusieurs fichiers dans la zone de téléchargement. Ou de cliquer sur le bouton Ajouter des fichiers Après avoir glissé un ou plusieurs fichiers dans la zone.

Pour envoyer les les fichiers sur le serveur, il faut cliquer sur le bouton Envoyer les fichiers. Un signe V est venu se placer lorsque le fichier est téléchargé sur nos serveurs.

Pour revenir au listing, il faut cliquer sur Revenir à la liste des fichiers

Si vous tentez de copier un fichier qui n’est pas d’une extension valide, le fichier apparaîtra dans la liste de téléchargement avec le détail de l'erreur.

Les fichiers correctes sont :

  • Pour les images : “jpg, jpeg, png, gif”
  • Pour les documents : “pdf”

La taille maximum d’un fichier étant de 5 mégas, si un besoin supplémentaire est nécessaire, il vous suffit de nous contacter pour nous adapter cela en fonction de vos besoin.

Lorsque vous faites appel au Gestionnaire de fichiers à partir de votre éditeur de texte pour sélectionner une image ou un document. Il suffit de vous diriger vers le fichier que vous souhaitez obtenir dans votre éditeur et de cliquer sur celui-ci, cela aura pour but de fermer le Gestionnaire de fichiers et d’afficher le document dans votre éditeur de texte.

Attention : L’éditeur de texte, ni le gestionnaire de fichier ne permettent la modification des fichiers images, textes, … ils permettent seulement la consultation de ceux-ci.

Versions du document

Date Version Commentaire
01 Octobre 2012 - Création du document
12 Mai 2013 2.5.4 Modification générale du document
21 Août 2013 3.0 Migration vers Twitter boostrap 2.6.2
13 Novembre 2013 3.7 Ajout du FileManager
02 Janvier 2014 4.0 Migration vers Twitter boostrap 3.2.0
03 Décembre 2014 4.2 Ajout du TinyMCE
13 Août 2015 4.5.8 Modification générale du document
10 Octobre 2016 4.7 Migration vers Twitter Boostrap 3.3.6
07 Février 2017 5.0 Nouveau template de l'administration
01 Septembre 2018 5.1.4 Migration vers Twitter Boostrap 4.0 & Nouveau template