Créer un éditeur de texte avec un textarea ou une div

Exemples d'éditeur de texte

Ci-dessous, voici un éditeur de texte qu'il est très simple de créer.

Dans cette démo, seuls les boutons gras, italique, soulignement, lien, image et titres sont présents. Mais vous pouvez rajouter tous les boutons souhaités ! Oui oui, vous avez bien compris tous les boutons !

Jetez un coup d'oeil des boutons possibles : https://codepen.io/netsi1964/full/QbLLGW/

De plus, notre éditeur de texte pourra nous afficher notre code HTML et encore mieux (!!!) vous pourrez récupérer les données pour les insérer dans votre BDD :-)

Avant d'aller plus loin dans les détails, je tiens à préciser que cet éditeur de texte est issu de :

https://openclassrooms.com/courses/creez-un-editeur-de-texte-wysiwyg

J'ai repris ce tuto et j'ai fait la liaison avec ma base de données afin d'envoyer les données.

Si vous appuyez sur envoyer texte, vous verrez que les données vont être envoyées sur une autre page en AJAX. Pour ceux qui aimerait avoir le code complet de ce tuto, merci de le faire savoir en bas, dans les commentaires.

Page de démo

http://phpmac.alwaysdata.net/editeurtexte.php

ou sur le site source même une démo est disponible, mais sans la liaison ajax !

https://codepen.io/eniotna/pen/xGjWVP

Attention ! Ce tuto est susceptible d'évoluer, et au fur et à mesure, je compte activer tous les boutons disponibles par les navigateurs sur l'éditeur de texte.

Bon codage à tous !

• RETOUR
• SUIVANT