tinymce

Installer et configurer tinyMCE

Sommaire

Présentation de TinyMCE

TinyMCE est un éditeur WYSIWYG (What you see is what you get). Cet éditeur de texte a été développé en Javascript/HTML, c’est  un  logiciel Open Source sous licence LGPL. Il permet d’ajouter du style (gras, italique, aligné à droite…) sur un texte ou bien d’insérer un lien ou une image. Les outils, utilisés sur cet éditeur de texte, sont très proche des outils Word, c’est pourquoi la prise en main de l’outil est très facile.

Voici un aperçu des outils de TinyMCE :

tinyMCE apercu

Installer TinyMCE

Télécharger TinyMCE

Les fichiers d’installations sont téléchargeables sur le site officiel de TinyMCE dans la rubrique download TinyMCE. Pour mon exemple, j’ai pris la dernière version présente lors de l’écriture de l’article, c’est à dire la version 3.5.3.

Dézipper TinyMCE

Une fois téléchargé, dézippez le fichier puis copiez le dossier « tiny_mce ». Il se trouve dans : « tinymce_3.5.3 » > « tinymce » > « jscripts » > « tiny_mce ». 

Sur votre serveur en local, créez un dossier (par exemple : « 1-tinyMCE-simple ») dans lequel vous allez coller le dossier « tiny_mce » et créez un fichier « index.html ».

Créer le formulaire

Dans ce fichier « index.html », il suffit de mettre ce code entre les balises head

et d’insérer un textarea dans un formulaire.

 

Télécharger l’exemple

Télécharger TinyMCE en mode "simple"

Télécharger TinyMCE en mode « simple »

 

Configurer TinyMCE

Modification du code

Pour configurer TinyMCE, il va falloir modifier le code qui se trouve entre les balises head :

 

Télécharger l’exemple

Télécharger TinyMCE en mode "advanced"

Télécharger TinyMCE en mode « advanced »

 

TinyMCE en français

Télécharger le pack Français

Pour passer TinyMCE en français, il va falloir télécharger le pack Français sur le site officiel.

Dézipper

Ensuite dézippez le fichier.

Fusionner

Sélectionnez les 3 dossiers (« langs », « plugins », « themes ») puis glissez les dans votre dossier « tiny_mce ». Cela aura pour effet de fusionner les dossiers. 

Modification du code

Pour finir, nous allons rajouter une ligne de code entre les balises head juste en dessous de theme : "advanced",

Télécharger l’exemple

Télécharger l'exemple version française en mode "advanced"

Télécharger l’exemple version française en mode « advanced »

Des plugins pour TinyMCE

KFM

Téléchargez des documents sur votre serveur et intégrez les facilement dans votre textarea via TinyMCE.

Installer et configurer KFM avec tinyMCE

Liens utiles

Site officiel de TinyMCE

Télécharger TinyMCE sur le site officiel

Télécharger le pack Français sur le site officiel

 

 

 

4 commentaires ont été rédigés, ajoutez le vôtre.

Laisser un commentaire

  1. Blaise Ntamag

    j’ai téléchargé la version 4.5. et je n’arrive pas à le faire fonctionner en mode « advance », bien que j’ai remplacer les plugins, thèmes et lang. il ne trouve pas plugin.min.js !!!

    Publié le 19 décembre 2016 à 16:03
    • cedric

      Je vous ai envoyé un mail sur votre boite mail

      Publié le 20 décembre 2016 à 20:18
  2. Dominique SANTHUNE

    Bonjour Cédric,
    J’ai téléchargé la version 4.5. et je n’arrive pas à le faire fonctionner en mode « advanced » car le fichier theme.min.js n’existe pas dans le dossier et je ne sais pas où trouver ce fichier.
    En plus, je n’arrive pas à récupérer le texte converti avec les balises HTML car le texte saisi récemment n’apparait pas.
    Merci d’avance de votre réponse.
    Bien cordialement,
    Dominique

    Publié le 16 janvier 2017 à 13:28
    • Dominique

      J’ai trouvé ce qu’il fallait ajouter :
      plugins: [
      ‘advlist autolink lists link image charmap print preview hr anchor pagebreak’,
      ‘searchreplace wordcount visualblocks visualchars code fullscreen’,
      ‘insertdatetime media nonbreaking save table contextmenu directionality’,
      ’emoticons template paste textcolor colorpicker textpattern imagetools codesample toc’
      ],
      toolbar1: ‘undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image’,
      toolbar2: ‘print preview media | forecolor backcolor emoticons | codesample’,

      Publié le 16 janvier 2017 à 14:58