Description

Typologie

Formation

Lieu

Paris

Nous vous proposons des cours ouverts pour se former autrement, pour devenir acteur de votre vie. Nous vous aidons à prendre votre envol, mais ça ne s'arrête pas là. Notre volonté est de vous accompagner tout au long de votre vie, dans votre parcours professionnel.Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Paris ((75) Paris)

Voir plan

7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Tous
Aux étudiants
À l'établissement

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Les matières

Éditeur

Le programme

Introduction du cours

Vous êtes le propriétaire d’un site et vous voulez ajouter du contenu facilement dessus ? En ce moment, vous utilisez le HTML pour mettre en page vos contenus mais vos contributeurs ne maîtrisent pas ce langage ?

Dans ce cours, je vous propose une solution simple : créer un éditeur de texte WYSIWYG.

Un quoi ??

Un éditeur WYSIWYG, vous avez bien lu, mais je devine que le problème n’est pas là… WYSIWYG signifie "What You See Is What You Get", c’est-à-dire “ce que vous voyez est ce que vous obtiendrez”. En quelques mots, un éditeur WYSIWYG permet d'éditer visuellement du texte, c'est-à-dire sans en passer par l'utilisation du HTML que connaissent bien les développeurs de sites web.

Comme exemples d’éditeurs de texte WYSIWYG, on peut citer des logiciels comme Microsoft Word, Libre Office Writer ou encore des éditeurs spécifiques au Web comme TinyMCE, CKEditor ou Froala.

Voici un exemple de ce que vous pourrez faire à la fin du cours :

Résultat final

Tester le code

Pour suivre ce cours, vous devez avoir des connaissances de base en HTML et en JavaScript.

Si ce n'est pas le cas, je vous invite à lire l'intégralité de la partie 1 et le chapitre 2 de la partie 4 du cours sur le HTML5 et les parties 1 et 2 du cours sur JavaScript.

Le HTML

Pour réaliser notre éditeur, nous aurons besoin de plusieurs éléments :

une balise <div> qui contiendra notre texte ;
une série de boutons qui serviront à mettre en forme le texte ;
et bien sûr, tout cela dans une page valide HTML5. :D

Une balise <div> pour un éditeur de texte ? Mais son contenu ne sera pas éditable !

Eh bien si ! Tout est possible grâce à l'attribut contentEditable qui permet d'éditer le contenu de n'importe quelle balise HTML directement via le navigateur. Vous pouvez par exemple placer cette page dans le back office de votre site Web, lieu de rédaction et de mise en forme de son contenu.

Voici le code de la page que nous utiliserons :

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon éditeur WYSIWYG</title> </head> <body> <input type="button" value="G" style="font-weight:bold;" /> // Un bouton pour mettre en gras le texte <input type="button" value="I" style="font-style:italic;" /> // Un autre pour le mettre en italique <input type="button" value="S" style="text-decoration:underline;" /> // Et enfin un bouton pour le souligner <div id="editeur" contentEditable ></div> // Et votre <div> devient éditable ! </body> </html>

Vous pouvez tester le code en l’état mais le résultat ne sera pas très lisible. Il manque quelque chose, vous ne trouvez pas ? Avec un peu de CSS appliqué à votre <div>, ça change tout ! Pour améliorer le rendu visuel, nous allons créer une feuille de style CSS qu'on inclura dans le fichier principal grâce au code <link rel="stylesheet" href="style.css" /> placé sous la balise <title></title> . Voici son contenu :

#editeur{ width: 500px; // La largeur de l'éditeur height: 200px; // La hauteur de l'éditeur border: 1px solid black; // Une bordure pour bien voir l'éditeur padding: 5px; // Une petite marge intérieure overflow: auto; // Cette propriété sert à envoyer le texte à la ligne au cas où il dépasse la largeur définie avant }

Vous pouvez tester l'écriture dans le cadre, ça fonctionnera !

Voici un aperçu du résultat :

On peut éditer le texte directement dans le div.

Tester le code

Mise en forme basique du texte

On peut maintenant écrire du texte dans un cadre, mais ce n'est pas fini ! Notre but est de pouvoir le mettre en forme et, pour cela, nous allons avoir besoin d'instructions en JavaScript et d'une fonction commande pour la mise en forme.

Créer une fonction commande

Nous mettrons les instructions JavaScript dans un fichier editeur.js . N'oubliez pas de l'inclure dans votre page principale grâce aux balises <script src="editeur.js"></script> , sous la balise <link /> .

Voici le code JavaScript de base à inclure dans ce fichier :

function commande(nom, argument){ if (typeof argument === 'undefined') { argument = ''; } // Exécuter la commande }

On peut remarquer que le second paramètre de la fonction (qui est nommé argument) est facultatif. Quand il n'est pas présent, ce qui est le cas pour l'instant, on lui donne une valeur par défaut (ici une chaîne vide).

Appeler la fonction commande

Pour chaque bouton, il faut appeler cette fonction en employant l'événement onclick .

Par exemple, pour le bouton qui met le texte en gras :

Vous pouvez répéter l'opération avec les commandes suivantes pour commencer :

Commande

Effet

bold

Met le texte en gras

italic

Met le texte en italique

underline

Souligne le texte

strikethrough

Barre le texte

Une fois que la fonction est appelée dans le HTML, il faut répercuter son effet sur le texte saisi dans l'éditeur.

Appliquer la mise en forme

Pour cela, nous allons utiliser la fonction execCommand dans le code JavaScript.

Elle comporte 3 paramètres :

Le nom de la commande (ex : bold) ;
Un booléen qui détermine si une interface doit être affichée à l'utilisateur. Ce paramètre n'est pas encore implémenté par les navigateurs donc il faudra le mettre à false ;
Le paramètre pour la commande (ex : le niveau du titre qu'on souhaite mettre en forme ). Il servira plus tard.

Ces paramètres étant définis, nous écrivons :

document.execCommand(nom, false, argument);

Après cette partie, vous obtenez un éditeur dans lequel vous pouvez écrire du texte et le mettre en forme.

Voici un aperçu du résultat :

Notre éditeur a des fonctions de mise en forme basiques

Tester le code

Les options de mise en forme ne se limitent pas à ces quelques paramètres. Que diriez vous d'aller encore plus loin ?

Des balises un peu plus complexes

Il est également possible, et vivement conseillé, d'ajouter des éléments comme des liens ou des images dans votre texte. Pour cela, nous allons utiliser le 3e paramètre de la fonction execCommand : argument. Je vous avais bien dit qu'il servirait !

Les liens

Dans les éditeurs, généralement, l’utilisateur peut renseigner des liens dans une petite fenêtre et les intégrer à son texte. Pour obtenir cet effet, ce n’est pas compliqué. La commande à utiliser est createLink mais pour commencer, n'oubliez pas de rajouter un bouton Lien.

Ensuite, pour pouvoir demander le lien à l'utilisateur, nous utiliserons la fonction prompt("texte") qui permet de renseigner des informations sous forme de texte. Nous allons la rajouter dans la fonction commande de votre code JavaScript. Voici comment elle se présente :

switch(nom){ case "createLink": argument = prompt("Quelle est l'adresse du lien ?"); break; }

Pour ouvrir la page via l'éditeur et vérifier si le lien fonctionne, vous pouvez cliquer dessus en maintenant la touche Ctrl enfoncée. Vous pouvez supprimer le lien grâce à la commande unlink. Dans ce cas, il faut l'appeler comme les commandes précédentes grâce au code JavaScript onclick="commande('unlink');" inséré dans un bouton.

Les images

Le fonctionnement est le même que pour les liens : on demande à l'utilisateur de renseigner l'adresse de l'image dans une petite fenêtre puis on utilise la commande insertImage pour qu'elle s'affiche convenablement. Avant, n'oublions pas de rajouter un bouton Image :

et une partie dans notre switch dans le code JavaScript :

case "insertImage": argument = prompt("Quelle est l'adresse de l'image ?"); break;

Vous pouvez redimensionner l'image une fois qu'elle est insérée en cliquant dessus. Plutôt pratique comme commande, non ?

Les titres

Pour les titres, je vous conseille d'utiliser une liste déroulante qui permet de choisir les différents styles. En plus, ce sera l'occasion d'utiliser un autre élément des formulaires en HTML. Pour cela, nous allons utiliser la balise <select> et l'attribut onchange. La commande à utiliser est heading et elle requiert un argument dans la fonction commande() : le niveau du texte. Dans le code suivant, on lui donne la valeur de l'option sélectionnée grâce au code JavaScript this.value .

<select onchange="commande('heading', this.value); this.selectedIndex = 0;"> <option value="">Titre</option> <option value="h1">Titre 1</option> <option value="h2">Titre 2</option> <option value="h3">Titre 3</option> <option value="h4">Titre 4</option> <option value="h5">Titre 5</option> <option value="h6">Titre 6</option> </select> Aperçu des nouvelles balises

Tester le code

Les autres commandes

Voici une liste (non exhaustive) de commandes que vous pouvez utiliser. Ces commandes sont reconnues par la plupart des navigateurs mais peuvent avoir un rendu différent. Nous y reviendrons plus loin.

Commande

Effet sur le texte

justifyleft

Aligné à gauche

justifyright

Aligné à droite

justifycenter

Centré

justifyfull

Justifié

insertunorderedlist

Liste à puces

insertorderedlist

Liste numérotée

backcolor

Couleur de fond

forecolor

Couleur du texte

fontname

Police d'écriture

inserthorizontalrule

Insère une ligne horizontale ( <hr> )

subscript

Indice

superscript

Exposant

Vous pourrez trouver une liste plus complète des commandes reconnues par Mozilla Firefox sur cette page : https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands

Catégories liées

Contact

Créez un éditeur de texte WYSIWYG

Questions / Réponses

Les Avis

Les matières

Le programme

Ajoutez des cours similaires
et comparez-les pour mieux choisir.

Créez un éditeur de texte WYSIWYG

Questions / Réponses

Les Avis

Les matières

Le programme

Ajoutez des cours similaireset comparez-les pour mieux choisir.

Ajoutez des cours similaires
et comparez-les pour mieux choisir.