TinyMCE – Documentation fr pour bien démarrer

Remise à jour d’une documentation pour l’outil TinyMCE l’éditeur WYSIWYG très utilisé sur le web. C’est une documentation en français et pour les novices.

Cet un article qui fait suite à une constatation suite à la réadaptation d’un de mes blogs. En effet, j’avais réalisé une doc sur TinyMCE qui apparemment était recherchée et pourtant totalement obsolète aujourd’hui, suite à cela j’ai perdu du Page Rank sur mon autre blog, je me suis donc dis, que ça pourra être toujours utile de fournir une telle doc.

Toutes les infos se trouvent sur ce billet, mais vous pouvez directement télécharger le PDF ici.

tinymce_ludikreation

Aide à l’intégration de TinyMCE
En Français

Ce petit document est en français et est le fruit d’un travail personnel. En aucun cas cela fait partie de la doc officiel de l’outil TinyMCE. Ce document peut comporter des erreurs et je vous encourage à apporter votre expérience et vos remarques.

Le site officiel de TinyMCE : http://tinymce.moxiecode.com

TinyMCE l’éditeur WYSIWYG (présentation)
TinyMCE de Moxiecode est un outil JavaScript / HTML WYSIWYG (What You See Is What You Get), en logiciel Open Source sous licence LGPL. Il a la capacité de convertir les champs textarea HTML ou d’autres éléments HTML en éditeur de texte. TinyMCE est conçu pour s’intégrer facilement à divers systèmes de gestion de contenu. TinyMCE est utilisé avec de nombreux systèmes tels que Mambo, Joomla, Drupal, Plone, WordPress, b2evolution, E107 et phpWebSite.

Installation

Voici un bref résumé de la mise en place de TinyMCE et de sa version fr. Sans trop rentrer dans les détails nous allons voir comment mettre en ligne l’outil TinyMCE et le paramétrer afin de s’en servir de suite.

Importation de tinyMCE

1. Dans un premier temps télécharger les .zip sur le site de moxiecode, l’adresse :
http://tinymce.moxiecode.com/download.php

Il faut télécharger le Main Package, à l’heure où j’écris c’est le tinymce_3_3b2.zip, ainsi que le ou les pack(s) de langue que vous souhaitez, ici on va prendre le pack fr (à savoir que par défaut c’est un pack anglais), pour se faire cliquez sur le lien de « language packs » et cochez votre langue, puis téléchargez.

2. Une fois les téléchargements effectués, il vous faut extraire les dossiers et fichiers, pour se faire créez un dossier qui accueillera la librairie pour votre site (ex : js). Ensuite, faite une extraction de TinyMCE vers ce dossier (vous n’aurez besoin que du dossier tiny_mce qui se trouve dans jscripts), puis faites une extraction de votre pack de langue dans ce dossier tiny_mce. Ce qui aura pour effet de rajouter tous les éléments traduits pour la langue française.

3. Voilà TinyMCE est installé et prêt à être utilisé sur votre site web. Maintenant, il vous faut l’exploiter.

Utilisation

Il existe une multitude de façon d’utiliser TinyMCE, je ne les détaillerais pas toutes, mais juste assez pour les utilisations les plus courantes.

Donc sur la page où vous voulez faire apparaitre votre éditeur mettez le script suivant dans le < head > de votre page :

<script src="&lt;chemin_vers_votre_dossier" type="text/javascript">// <![CDATA[
/tiny_mce/tiny_mce.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
tinyMCE.init({
    mode : "textareas",
    language : "fr",
    theme : "simple"
});
// ]]></script>

Puis voici un exemple de formulaire simple :

<form action="traitement.php" method="post"> <textarea style="width: 100%;" name="content">&lt;br /&gt; </textarea>
<input name="send" type="submit" value="Envoyer" />
</form>

Voilà pour la forme la plus simple de l’éditeur en version française. En gros, le code signifie : Toutes balises textarea (mode : « textareas ») seront des éditeurs WYSIWYG en français (language : « fr ») et avec juste le strict minimum (theme : « simple »). Ce qui donne visuellement ceci :

tinymce

Vous allez me dire, oui, mais moi je veux tous les boutons etc… On y arrive.

TinyMCE possède un thème, aussi simple d’utilisation à la base, mais avec plus d’éléments principaux. C’est le thème « advanced »

Donc, toujours aussi simplement, le code dans le < head > deviendra à la place :

<script src="&lt;chemin_vers_votre_dossier" type="text/javascript">// <![CDATA[
/tiny_mce/tiny_mce.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
tinyMCE.init({
    mode : "textareas",
    language : "fr",
    theme : "advanced"
});
// ]]></script>

Ce qui aura pour conséquence de vous fournir ce genre d’éditeur :

tinymce2

Votre éditeur est un peu plus complet, sans pour autant être plus difficile à installer. Non ?

Pour récupérer vos données, cela se passe comme un formulaire basique, donc pour résumer et faire simple, par exemple en php ainsi :

<?php $contenu = $_POST[‘content’] ; ?>

L’utilisation de base s’arrête là, mais TinyMCE ce n’est pas seulement ça. TinyMCE possède un système évolué de plugins, ce qui permet d’améliorer et d’agrémenter l’éditeur, voir même de faire des composants soit même. Il faudrait un ouvrage complet pour décrire tout ceci.

Aperçu des Plugins

Les plugins vous permettent de rajouter des éléments à votre barre d’outils, il y en a beaucoup. Pour les utiliser, il faut les intégrer comme suit :

plugins : "table, fullpage",

A savoir que vous pouvez rajouter des boutons à cette barre d’outils via ces plugins et seulement avec le thème advanced, de cette manière :

theme_advanced_buttons3_add : "fullpage, tablecontrols"

Donc, en reprenant ces éléments cela donnerais :

<script src="&lt;chemin_vers_votre_dossier" type="text/javascript">// <![CDATA[
/tiny_mce/tiny_mce.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
tinyMCE.init({
    mode : "textareas",
    language : "fr",
    theme : "advanced",
plugins : "table, fullpage",

theme_advanced_buttons3_add : "fullpage, tablecontrols"

});
// ]]></script>

Ce qui donnera :

tinymce3

Cela commence déjà à être très intéressant, on vient de compléter la barre avec un plugin qui permet de rajouter des données à la page qui sera générée par l’éditeur, tel que méta etc… et avec une gestion de tableaux. Il existe bien d’autres plugins que je vous ferais découvrir prochainement dans un autre document.

Quelques plugins disponibles

Voici un aperçu rapide de quelques plugins disponibles avec TinyMCE.

advhr : un éditeur avancé de barres horizontales < hr />.
Le composant à mettre dans une des barres theme_advanced_buttons est : advhr.

advimage : un éditeur avancé d’insertions d’images.
Le composant à mettre dans une des barres theme_advanced_buttons est : image.

advlink : un éditeur avancé de liens, avec popup, événements etc…
Le composant à mettre dans une des barres theme_advanced_buttons est : link.

bbcode : si vous mettez cela dans les plugins, tinyMCE ressortira toutes les balises en
bbcode.

directionality : pour indiquer la direction du texte.
Les composants à mettre dans une des barres theme_advanced_buttons sont : ltr et rtl.

emotions : pour intégrer des émoticons.
Vous pouvez en rajouter dans le dossier images du plugin emotions.
Le composant à mettre dans une des barres theme_advanced_buttons est : emotions.

fullpage : permet de rajouter des données à la page qui sera générée par l’éditeur, tel que
méta etc…
Le composant à mettre dans une des barres theme_advanced_buttons est : fullpage.

fullscreen : permet d’avoir l’éditeur sur toute la page.
Le composant à mettre dans une des barres theme_advanced_buttons est : fullscreen.

insertdatetime : vous permettra d’insérer date et heure.
Les composants à mettre dans une des barres theme_advanced_buttons sont : insertdate (pour la date) et inserttime (pour l’heure).

layer : permet de positionner des calques.
Les composants à mettre dans une des barres theme_advanced_buttons sont : Moveforward (pour avancer), movebackward (pour reculer), absolute(pour créer le calque en position absolu), insertlayer (créer un nouveau calque).

nonbreaking : Le composant à mettre dans une des barres theme_advanced_buttons est : nonbreaking.

paste : permet de sélectionner tout, coller un mot ou un texte.
Les composants à mettre dans une des barres theme_advanced_buttons sont : pastetext (coller un texte avec ou sans saut de ligne), pasteword (coller des mots), selectall (tout sélectionner)

preview : une prévisualisation de ce que donnera le texte tapé.
Le composant à mettre dans une des barres theme_advanced_buttons est : preview.

print : nous permettra d’imprimer le document.
Le composant à mettre dans une des barres theme_advanced_buttons est : print.

save : permet de sauvegarder le travail en cours.
Les composants à mettre dans une des barres theme_advanced_buttons sont : save (pour sauver) et cancel (pour annuler la sauvegarde).

searchreplace : permet une recherche dans le texte ou un remplacement de mots.
Les composants à mettre dans une des barres theme_advanced_buttons sont : search (pour chercher) et replace (pour remplacer).

style : un éditeur de styles css.
Le composant à mettre dans une des barres theme_advanced_buttons est : styleprops.

table : une éditeur de tableaux (balise

)
Le composant à mettre dans une des barres theme_advanced_buttons est : table.template : Un éditeur de templates.
Le composant à mettre dans une des barres theme_advanced_buttons est : template.

visualchars : (fonctionne moyen) permet de voir les sauts de ligne.
Le composant à mettre dans une des barres theme_advanced_buttons est : visualchars.

xhtmlxtras : un éditeur d’attributs complet.
Les composants à mettre dans une des barres theme_advanced_buttons sont : cite (insert une citation), acronym (gère les acronymes), abbr (pour les abréviations), del (pour effacer), ins (y faire une insertion), attribs (ajouter/modifier un attribut).

Ensuite vous avez des composants de base sans plugin :
bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, nu
mlist, sub, sup, charmap, undo, redo, outdent, indent, forecolor, backcolor, fontsizeselect, fontselect, formatselect, link, unlink…

La liste est bien plus longue, mais je la complèterais au cours d’un article qui sera dédié à TinyMCE et ses plugins…

Enfin

A savoir qu’il existe une version avec JQuery.

Je réaliserai un document pour une utilisation avancée de l’outil, maintenant vous avez les bases. C’est à vous de jouer et de tester, à savoir que le site officiel de TinyMCE, regorge d’exemples qui vous permettent d’obtenir ce que vous souhaitez. Avec ces bases, les exemples sur ces pages n’auront plus de secrets pour vous :

http://tinymce.moxiecode.com/examples/full.php

Pour voir le code source, cliquez sur le bouton « view source » et faites des essais.

——————

Merci d’avance pour vos retours et n’hésitez pas à contribuer.

Comments
  1. Fred
  2. Jack
  3. Jack
  4. LudiKadmin
  5. Carine
  6. Carine
  7. LudiKadmin
  8. Carine
  9. Printz
  10. LudiKadmin
  11. Printz
  12. Printz
  13. LudiKadmin
  14. Jérôme
  15. Jérôme
  16. LudiKadmin
  17. ouedraogo p mahome
  18. LudiKadmin
  19. besm
  20. LudiKadmin
  21. besm
  22. LudiKadmin
  23. josé
  24. LudiKadmin
  25. Xavier
  26. LudiKadmin
  27. Xavier
  28. gkalikoba
  29. Guardian
  30. JuJuCe
  31. LudiKadmin
  32. lizarb
  33. LudiKadmin
  34. Guardian (encore ^^)
  35. LudiKadmin
  36. philippe
  37. philippe
  38. harri
  39. LudiKadmin
  40. LudiKadmin
  41. Henri
  42. Boubson
  43. lorenzi
  44. LudiKadmin
  45. lorenzi
  46. LudiKadmin
  47. lorenzi
  48. LudiKadmin
  49. eleb

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*