Bonjour et bienvenue !
Aujourd’hui, nous allons créer ensemble un éditeur de texte en utilisant les technologies HTML5, CSS3 et JavaScript. Ce petit projet web est une excellente introduction au développement web et vous permettra de mieux comprendre comment ces technologies fonctionnent ensemble.
Pour ce projet, vous n’avez pas besoin d’être un expert en informatique. Si vous avez une connaissance de base en HTML, CSS et JavaScript, cela suffira amplement. L’essentiel est d’avoir un peu de temps et de motivation pour suivre ce guide.
Nous allons travailler principalement sur trois fichiers :
- index.html : Ce fichier contiendra la structure de base de notre projet web.
- index.js : Ce fichier nous permettra d’écrire notre code JavaScript. Pour ce tutoriel, nous allons utiliser des liens externes afin de réaliser notre projet.
- index.css : Ce fichier nous permettra de styliser notre projet web.
Note : Vous n’êtes pas obligé de nommer vos fichiers comme indiqué ci-dessus. Vous pouvez choisir les noms qui vous conviennent le mieux.
À la fin de ce petit projet, vous aurez un éditeur de texte fonctionnel qui vous permettra de :
- Écrire et formater du texte.
- Charger des documents.
- Appliquer différents styles au texte (gras, italique, souligné, etc.).
Je vous propose de vous rendre sur ce site web : https://quilljs.com
Vous allez être dirigé vers ce site web qui vous permettra d’utiliser ces API.
Juste une parenthèse, une API est un ensemble de règles qui permet à différents programmes ou applications de « parler » entre eux et de demander des services ou des informations, un peu comme un serveur dans un restaurant qui fait le lien entre vous et la cuisine. En termes simples, c’est comme un serveur dans un restaurant : imaginez que vous voulez commander un plat.
Ici, nous allons faire appel à l’API de Quill.
Et si nous écrivions notre code ?
Dans la page Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Editeur de texte</title>
</head>
<body>
</body>
</html>
- Voici à quoi ressemble un code HTML classique.
La balise <html> nous indique qu’il s’agit d’un fichier HTML.
La balise <meta charset="UTF-8"> permet de définir le codage des caractères, ici UTF-8, un codage de caractères informatiques conçu pour coder l’ensemble des caractères.
La balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> permet la gestion du design responsive.
La balise <title> contient le titre de notre site web. La balise </head> marque la fin de l’en-tête.
La balise <body> contient le corps de notre projet, c’est ici que nous allons demander à JavaScript d’afficher notre éditeur de texte.
Maintenant, nous allons ajouter les liens vers notre fichier index.html et écrire dans index.js afin de lui demander d’afficher notre éditeur de texte.
- index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Mon Editeur de texte</title>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
</head>
<body>
<div class="bannier">
<h1>Félicitations ! <br> Voici votre éditeur de texte.</h1>
</div>
<div class="contenair">
<div id="editor"></div>
</div>
<script src="index.js"></script>
</body>
</html>
- index.js
const quill = new Quill('#editor', {
theme: 'snow',
placeholder: 'Voici votre Editeur de texte...'
});
- index.css
body{
margin: 0;
padding: 0;
.bannier{
margin-bottom: 5%;
background-color: #f48924;
color: #ffffff;
padding: 2%;
box-shadow: 2px 1px 3px #000000;
h1{
margin: 0;
text-align: center;
text-transform: capitalize;
}
}
.contenair{
width: 1024px;
margin: auto;
#editor {
height: 400px;
}
}
}
Ouvrez le fichier index.html en effectuant un double clic pour voir le résultat.
Vous pouvez améliorer cette éditeur de texte en suivre ce lien : Cliquez ici