Installer l’éditeur de texte Tiny MCE en mode avancé
C’est une demande récurrente de clients : « Faites-moi un champ de saisie de texte où on peut mettre du gras, de l’italique, des listes et des couleurs, comme Word« … L’objectif étant bien entendu de récupérer cette mise en forme, en général pour la stocker dans une base des données.
HTML ne permettant pas ce type de fantaisies, il faut donc se tourner vers les « éditeurs de texte » open-source. Il y en a quelques uns, je présente ici l’intégration de Tiny-MCE. C’est à la fois l’un des plus abouti, et des plus simple d’utilisation. C’est celui qu’a choisi le N°1 des moteur de blog (WordPress) : ce n’est pas pour rien…
Il y a quelques années j’avais fait un article sur l’intégration de Tiny-MCE en mode simple, celui-ci portera sur le mode avancé (qui propose beaucoup plus d’options de formatage à l’utilisateur)
Depuis le version 4, Tiny MCE vous propose de fonction soit en mode « Cloud » (les fichiers sont stockés sur internet), soit en mode local, les fichiers étant stockés sur votre ordinateur.
Mode Cloud
C’est d’une simplicité angélique, en 3 temps !
1. Intégrez entre les balise <head> et </head> le code d’appel suivant:
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<form action="traitement.php" metho="post">
[...]
<textarea name="CeQueVousVoulez">
Méthode locale
Dossier
Formulaire
<form action="traitement.php" metho="post">
[...]
<p><label for="commentaire1" > <strong>COMMENTAIRE 1</strong> </label></p>
<p><textarea id="commentaire1" name="Commentaire1" rows="5" cols="53"></p>
<p><label for="commentaire2" > <strong>COMMENTAIRE 2</strong> </label></p>
<p><textarea id="commentaire2" name="Commentaire2" rows="5" cols="53"></p>
[...]
</form>
Javascript
<!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// type de mode
mode : "exact",
// id ou class, des textareas appelés
elements : "commentaire1,commentaire2",
// en mode avancé, cela permet de choisir les plugins
theme : "advanced",
// langue
language : "fr",
// liste des plugins
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sup,forecolor,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent,separator,cleanup,|,undo,redo,|,",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
height:"250px",
width:"600px"
});
</script>
- bold
- italic
- underline
- strikethrough
- justifyleft
- justifycenter
- justifyright
- justifyfull
- bullist
- numlist
- outdent
- indent
- cut
- copy
- paste
- undo
- redo
- link
- unlink
- image
- cleanup
- help
- code
- hr
- removeformat
- formatselect
- fontselect
- fontsizeselect
- styleselect
- sub
- sup
- forecolor
- backcolor
- forecolorpicker
- backcolorpicker
- charmap
- visualaid
- anchor
- newdocument
- blockquote
- separator ( | is possible as separator, too/)
Récupérer les variables
merci
bonjour et merci pour votre aide;
je ne trouve pas dans le dossier téléchargé de tinymce le thème advanced?
Je vous remercie infiniment, vous êtes vraiment des bon moniteurs. ça fait plus de quatre ans que je cherche comment utiliser le tinyMCE, mais je n’y parvenais pas. Maintenant grâce à votre tutoriel, je suis sûre que ça va marcher.