Insérer une image avec CKEditor

Contributeurs

Statut du tutoriel : 

À jour

Niveau du tutoriel : 

Modules utilisés : 

Pour insérer une image dans une page, un article ou un sujet de forum, on va utiliser le CKEditor qu'on a installé et configuré dans les tutos précédents :

  1. Connectez-vous sur votre site avec votre nom d'utilisateur et mot de passe
  2. Cliquez sur Ajouter du contenu, puis sur le type de contenu que vous voulez créer, par exemple Article
  3. Renseignez le Titre
  4. Dans body, là où apparait l'éditeur de texte, cliquez sur l'icone image dans la barre :

    Cette image montre normalement l'emplacement du bouton !

  5. Une boite de dialogue s'ouvre alors. Cliquez sur explorer le serveur
    1. ne pas oublier de se mettre en Full HTML
    2. mettre le profil USER-1 au rôle administrateur dans la configuration de IMCE
  6. Une fenêtre s'ouvre. Cliquez sur Transférer (en haut à droite de la fenêtre), puis sur Choisissez un fichier.
  7. Cherchez l'image que vous voulez insérer dans vos dossiers, sélectionner-là puis cliquez sur OK.
  8. Cliquez sur Transférer, l'image est maintenant sur le serveur de l'école, disponible (uniquement) pour votre site.
  9. Note : si vous avez suivi ce tuto, dans la partie Protéger les fichiers, vous avez dû cochez la case méthode de fichier privé. Pour uploader une image qui devra être visible pour tout le monde, il faut rebasculer en système de fichiers publics le temps d'uploader et d'écrire le contenu.
  10. Sélectionnez votre image dans la liste sur la gauche et cliquez sur Insérer un fichier.
  11. Vous êtes à nouveau dans la boite de dialogue Propriétés de l'image, où vous pouvez modifier sa taille, son alignement, etc. comme avec un traitement de texte classique. Mais vous pouvez aussi ajouter un texte de remplacement qui peut être utilisé par les lecteurs d'écrans, les moteurs de recherche et qui s'affichera à la place de l'image si celle-ci ne peut être chargée.
  12. Cliquez sur OK, l'image est insérée dans votre page ou article, vous pouvez ajouter du texte, une autre image, etc., puis cliquez tout simplement sur Enregistrer en bas de la page et votre page agrémentée d'une image sera créée