LILINE’S LAB

Un éditeur d’articles en JavaScript

par | Juin 29, 2024 | Développement, JavaScript

Dans ce mini-projet nous allons construire un éditeur d’articles à l’aide de JavaScript.
L’utilisateur devra pouvoir :
– aligner un texte à droite, au centre et à gauche
– passer des mots en gras, en italique et les souligner
– ajouter une image de son choix

Voici le bout de code HTML et Javascript qui a permis de créer l’interface de cet éditeur :

HTML
<div class="toolbar">
<!-- Les commandes ci-dessous font appel aux fonctions du fichier editor.js et permettent de formater le texte ou d'ajouter une image
Prenons la première ligne : onclick="commande('bold') est un attibut d'évènement qui va la appeler la fonction "commande" et lui passer l'argument "bold"-->
  <button class="btn bold" onclick="commande('bold');">G</button>
  <button class="btn italic" onclick="commande('italic');">I</button>
  <button class="btn underline" onclick="commande('underline');">U</button>
  <button class="btn iconbtn" onclick="commande('justifyleft');"><img src="./assets/images/align_left_icon.png"></button>
  <button class="btn" onclick="commande('justifycenter');"><img src="./assets/images/align_center_icon.png"></button>
  <button class="btn" onclick="commande('justifyright');"><img src="./assets/images/align_right_icon.png"></button>
  <button class="btn" onclick="commande('insertImage')">IMG</button>
</div>

JavaScript
myImgUrl =  localStorage.getItem("myImgUrl");

function commande(name, arg) {
    // Si l'argument `arg` n'est pas défini, on le initialise à une chaîne vide
    if (typeof arg === 'undefined') {
      arg = '';
    }
    // On utilise une instruction switch pour gérer les différentes commandes
    switch (name) {
      // Cas où la commande est "insertImage", c'est à dire si l'on cherche à insérer une image 
      case "insertImage":
        // On vérifie d'abord si aucune image n'est enregistrée dans la variable myImgUrl 
        if(!myImgUrl){
          // On sauvegarde le contenu des éléments `title` et `content` dans `localStorage`
          localStorage.setItem('title', title.innerHTML);
          localStorage.setItem('content', content.innerHTML);
          // On redirige l'utilisateur vers la page 'images.html'
          window.location = 'images.html';
        } else {
          // Sinon, on récupère l'URL de l'image depuis `localStorage`
          let imgUrl =  localStorage.getItem("myImgUrl")
          // On met à jour `arg` avec l'URL de l'image
          arg = imgUrl;
          // On supprime l'élément `myImgUrl` de `localStorage` afin de pouvoir insérer ensuite une autre image
          localStorage.removeItem("myImgUrl");
          break
        }
    }
    // On exécute la commande d'édition spécifiée par `name` avec l'argument `arg`
    document.execCommand(name, false, arg);
}

Ainsi les balises utiles au formatage du texte et à l’ajout d’image(s) seront ajoutées :

Et voici une démonstration vidéo de l’éditeur :

Si vous souhaitez en voir davantage rendez-vous sur les repositories du mini-projet.
FrontEnd : https://github.com/Celine86/WYSIWYG_FRTD
BackEnd : https://github.com/Celine86/WYSIWYG_BCKD


logo du site

   


Consultante spécialisée dans les technologies Microsoft, je justifie de plus de 14 ans d’expérience dans le secteur IT.
Mon parcours professionnel, riche et varié, m’a permis de développer de solides compétences, tant techniques qu’humaines. Je suis reconnue pour ma capacité à analyser rapidement les enjeux techniques et à concevoir des solutions pertinentes, y compris sur des problématiques complexes.
Mon approche proactive, alliée à mes compétences en développement, me permet de proposer des évolutions efficaces, toujours en cohérence avec les objectifs métiers.
En parallèle de mon activité professionnelle, je prends plaisir à approfondir mes compétences techniques en réalisant des projets personnels. Je développe notamment des jeux web basés sur React et PHP, ainsi que des applications orientées métier avec SPFx.