Etendre les fonctionnalités de l’éditeur visuel de WordPress : TinyMCE

TinyMCE

  • Comment étendre l’éditeur visuel de WP ?
  • Comment mettre les titres en couleurs ?
  • Comment changer la taille du texte ?
  • Comment faire des titres ?
  • Etc.

On ne compte plus le nombre de fois où reviennent ses questions sur le forum…

Pour remédier à cela, nous allons très simplement mettre à jour l’éditeur visuel de WordPress, j’ai nommé TinyMCE 2, et activer les fonctions manquantes.

Donc avant de commencer ce petit tutorial, assurez-vous de posséder sur votre ordinateur !

  • un client FTP (par exemple FileZilla)
  • un gestionnaire d’archive (par exemple Winrar)
  • un éditeur de texte évolué (par exemple NotePad++)(optionel).

(Lire l’ensemble de l’article avant de vous plonger dans le tutorial… vous comprendrez vite pourquoi…)

Procédons !

Méthode manuelle :

  1. Télécharger la dernière version de TinyMCE que vous trouverez sur le site officiel. (On en est actuellement à la version 2.0.8)
  2. Décompresser l’archive dans un dossier de votre ordinateur
  3. Copier l’intégralité des fichiers récemment décompressés contenu dans le dossier « /tinymce/jscripts/tiny_mce/ » vers le dossier « votreblog/wp-includes/js/tinymce » à l’aide de votre client FTP (vous devez écraser les fichiers existants.)
  4. Maintenant que votre éditeur TinyMCE est à jour, il va falloir modifier le fichier « the tiny_mce_gzip.php » pour le rendre compatible avec WordPress, et également ajouter 2 plugins lié à WordPress tels que le « Read More » (lire la suite) et « Next Page » (pagination d’un article)
  5. Pour cela, télécharger l’archive suivante sur Source Forge (en bas de la page pour le téléchargement)
  6. Extraire et envoyer le fichier « tiny_mce_gzip.php » sur votre FTP, dans le dossier : « votreblog/wp-includes/js/tinymce/ » (vous devez écraser les fichiers existants.)
  7. Dans cette même archive, extraire et envoyer le dossier « wordpress » sur votre FTP, dans le dossier « votreblog/wp-includes/js/tinymce/plugins/ » (vous devez écraser les fichiers existants.)
  8. A ce point, l’éditeur visuel est à nouveau fonctionnel, mais ce dernier possède toujours les fonctions de base.
  9. Pour activer l’ensemble des fonctionnalités, il vous éditer le fichier « tiny_mce_gzip.php » présent dans le dossier : « votreblog/wp-includes/js/tinymce/ », vous avez 2 possibilités.
    1. Configuration de base (celle livré avec WordPress par défaut)
    2. Configuration complète (l’intégralité des fonctions disponibles… trop à mon goût)
  10. Pour selectionner l’interface de votre choix, il vous suffit de commenter les configurations que vous ne souhaitez pas utiliser. Attention, si 2 configurations sont dé-commentés, votre interface affichera 2 éditeurs visuels (logique)
  11. A ce point, votre éditeur visuel, est complet, mais n’est pas traduit… Tout simplement car la traduction française de WordPress ne traduit pas les nouvelles fonctions inclus dans la version de TinyMCE. Pour remédier à ca, il vous faut télécharger le pack français pour TinyMCE. Envoyer le contenu dans le dossier « /tinymce/jscripts/tiny_mce/ » vers le dossier « votreblog/wp-includes/js/tinymce » (toujours par le biais de votre client FTP).
  12. Maintenant que les fichiers de traduction sont présent sur le serveur, il va falloir spécifier à votre configuration d’utiliser le fichier de langue française. Pour cela ajouter dans votre configuration le paramètre suivants : « <?php if (WPLANG == « fr_FR ») { echo ‘, language : « fr »‘; } ?> »
  13. Cette petite ligne permet de détecter si votre blog WordPress est configuré pour utiliser le fichier de langue Français-Français (distribué par mon collègue Xavier), si ca n’est pas le cas, l’interface sera disponible uniquement en anglais.
  14. C’est terminé !

 

Version Francophone

Comme je l’ai écrit ci-dessus, je trouve que la configuration complète de TinyMCE est trop… complète…  4 lignes de boutons, c’est lourd et inutile pour le commun des mortels…

De ce fait j’ai modifié la configuration de l’éditeur pour faire une version intermédiaire… qui ressemble précisément à cela :

EditeurVisuel

J’ai également apporté d’autres modifications, tels que la possibilité de changer facilement de configuration pour l’éditeur visuel. Il est globalement plus simple à mettre en œuvre.

Pour le téléchargement c’est par ici : tiny_mce_gzip_fr (A envoyer dans le dossier « votreblog/wp-includes/js/tinymce »)

Il manque également la traduction française du plugin « wordpress » de TinyMCE, pour le téléchargement :  wordpress_tiny_fr (A envoyer dans le dossier « votreblog/wp-includes/js/tinymce/plugins »)

Pour les fainéants, et possesseurs de la dernière version de WordPress (c’est à dire la version 2.0.5), je mets également à disposition une archive contenant l’ensemble des fichiers préconfigurés pour la configuration « WordPress Francophone » de TinyMCE… rien à éditer… que du bonheur :)

 

Téléchargement : tinymce_fr (version 0.2) (à envoyer dans le dossier « votreblog/wp-includes/js »)

 

Changelog :

  • v0.2 : Correction d’un bug JavaScript, dans le plugin WordPress de TinyMCE
  • v0.1 : 1ère publication

 

TodoList :

  • Permettre le choix de la configuration de l’éditeur pour chaque utilisateur
  • Permettre l’ajout de boutons de plugins tiers, comme dans l’éditeur de base
  • Permettre la personnalisation de l’éditeur depuis la console d’administration de WordPress

 

Note : La mise à jour de votre éditeur visuel supprime les boutons ajoutés par vos plugins tiers. Pas encore de solution pour le moment.

 

Source pour la rédaction de cet article : http://tinymce.moxiecode.com/punbb/viewtopic.php?id=4902 + Test et modification de ma part :)

L'auteur :

Co-fondateur de WordPress Francophone.

Directeur associé de Be API, agence spécialisé dans le développement de solutions complexes.

Freelance spécialisé dans l'expertise WordPress et BuddyPress

Retrouvez mon blog : www.herewithme.fr

Et mon site professionnel : beapi.fr

Informations annexes à l'article

Cet article a été publié le Samedi 18 novembre 2006 à 17:09 et est classé dans WordPress.

Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0.

Les commentaires et pings sont fermés.

Article lu 40 410 fois.

Méta

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (4 votes, average: 4,25 out of 5)
Loading...Loading...
Imprimer cette article Envoyer cet article à un ami

59 commentaires

  1. Et dire que je me suis embêté hier soir pour essayer de faire une mise à jour par moi-même en vain…
    Heureusement que tu es là…

    Bon, je télécharge et je teste.

    Merci à toi.

  2. :happy:

  3. … et en plus, ça marche !

  4. Juste un ti détail en passant :
    Le smiley au milieu de la commande “”
    risque de faire un peu désordre, il doit au moins manquer une « ) » :oups:
    Sinon, il est vrai que le pack tout-en-un est bien plus simple et fonctionne très bien :)
    Merci

  5. Crotte, pardon :rolleyes:
    lacommande est “php if (WPLANG == “fr_FR” { echo ‘, language : “fr”‘; } ” et il manque une parenthése fermée au milieu il me semble
    php if (WPLANG == “fr_FR”) { echo ‘, language : “fr”‘; }

  6. Ou plus simple, tu télécharges le fichier « tiny_mce_gzip_fr » de mon cru et tu auras la ligne fonctionnelle et sans smiley ;)

  7. Edit : Suite à un bug de dernière minute j’ai désactivé les téléchargements… merci de votre compréhension ! :(

  8. Je vois que mon post sur le forum vous a donné des idées :)

    Juste préciser que certains boutons (copier, coller,etc…) nécessite certaines modifications sous firefox.

    Merci pour le travail de traduction en tout cas. :)

    A+

    Livai

  9. Ca doit être bon :D

    Livai ? Quels modifications ?
    Tu peux me contacter ? en pv sur le forum ? pour en discuter?
    merci !

  10. Sans rapport direct avec cet article mais fort intéressant pour vous:

    votre blog est le 5ème en français sur Technorati: voir le classement que je lance aujourd’hui

    http://www.bloghorizon.com/200.....ncophones/

    Voir aussi pour les explications: http://www.bloghorizon.com/200.....g-horizon/

  11. PS à propos de blog Horizon: j’ai bien sûr fait ce site avec WordPress!

  12. AMO, je t’ai envoyé le MP :)

    A+

  13. Bonjour !
    J’ai essayé d’installer ta mise à jour pour venir à bout de mes problèmes, mais je vais finir par croire que j’ai la poisse :(
    Je suis sous MAC, j’ai la version 2.0.5 fr de WordPress. Quand je rédige et consulte mon blog sous Safari, tout va pour le mieux. Par contre, quand je rédige et consulte sous Firefox, c’est la cata ! :( J’ai consulté les forums mais sans résultat.
    De plus, une fois ta mise à jour installé, sous Firefox plus rien ne fonctionnait :(
    Please, HEEEEEEEELLLLLLLLLPPPPPPPPP.
    A part ça, merci pour tout le super boulot que vous faites pour les versions françaises, c’est super ! :D

  14. Gilles Lorient 20/11/06 - 12:46

    :oups: Bonjour,

    Super mais mes icônes pour les plugins « contact form » et « images manager » n’apparaissent plus :rolleyes:

    Je n’ai pas encore essayé la version prête pour la 20.0.5 mais la version française décrite ci-dessus…

    Une soluce ?

    Merci et bravo !

    Gilles

  15. Note : La mise à jour de votre éditeur visuel supprime les boutons ajoutés par vos plugins tiers. Pas encore de solution pour le moment.

    Il faut lire ! :rolleyes:
    Je suis entrain d’adapter la chose pour … patience :)

  16. Gilles Lorient 20/11/06 - 13:19

    Re : j’ai réalisé la mise en place de la version complète suivant le tuto ci-dessus nickel mais je n’ai pas l’apparition des boutons des plugins “contact form” et “images manager”

    (Un détail pour le code à ajouter dans la config pour les fichiers de langue : (alors qu’il apparaît avec un ;) dans l’article…)

    Merci pour ces infos :D

  17. Gilles Lorient 20/11/06 - 13:20

    Merci et désolé je n’avais pas lu cela trop impatient !
    Bon courage…

    :rolleyes:

  18. Ouf… Je suis venu à bout (seul) de mon problème d’affichage :cool:
    Par contre, je ne suis pas venu à bout de la mise à jour proposé ici :(
    J’ai pourtant suivi les manip’ décrites, mais rien à faire :(
    Quelqu’un d’autre que moi a-t-il des problèmes d’affichages dus à Firefox malgré la mise à jour de TinyMCE ici proposée ?

  19. Ca y est, j’en suis enfin venu à bout ! :P
    J’ai suivi les instructions du paragraphe « Version Francophone », et ça fonctionne très bien. Je précise qu’il m’a tout de même fallu faire une réinitialisation de Firefox (vider la mémoire cache) pour que la nouvelle régle de mise en forme apparaisse enfin :)
    Merci pour ce travail de mise à jour :D

  20. Excellent ce tuto, ça marche bien chez moi.

    Par contre, je comprend pas bien dans quel fichier il faut rentrer ce code pour :

    Merci par avance.

  21. Bonjour
    La version 2.05 il y a dans l’archive plusieurs fichiers
    faut’il tout telecharger ou seulement Un seul.
    j’ai telecharger un fichier tinymce et je n’ai pas d’editeur visuel,j’utilsais editormonkey que j’ai desactive et valide editeur visuel dans mon profil mais je n’ai pas d’editeur visuel?
    Cordialement

    jacky

  22. j’ai installé la version pour 2.05, mais j’ai desactive le plugin editormontkey, et je n’ai pas l’editeur visuel meme apres l’avoir cocher dans l’utilisateur.

  23. Salut,

    J’ai intégré le package de AmO dans un plugin.
    C’est plus simple que d’écraser les fichiers d’origine.
    Vous pouvez le télécharger
    http://microwa.com/doc/2006/12/miwa-editor.zip

    Il y aussi une discussion sur le forum (en cas de problème)
    http://www.wordpress-fr.net/su.....hp?id=3183

    Bon W-e

  24. Que veut dire commenter dé-commenter les configurations?

  25. Bonjour,

    À l’heure actuelle, je tente l’installation de Tinymce tel que décrit ci-dessus. Mon erreur, j’ai commencé le tout en écrasant tous les fichiers/folders existants du tinymce à l’aide de mon FTP (“votreblog/wp-includes/js/tinymce”)… oui, tout! Donc, comment faire pour remettre à nouveau les fichiers/folders existants?

    Merci pour la patience. :oups: :argh:

  26. Ok, super MAJ !
    Une ou deux question :

    Comment a partir de WP 2.0.5 et du module d’uploading integre dans WP envoyer dans la zone d’edition de l’article (comme pour une photo) le media flash ou la video, pour l’instant il y a 2 bugs :

    1° un probleme de focus ou de select puisque lorsque je selectionne le fichier et que je l’envoie il n’arrive pas la premiere fois dans la zone d’edition mais seulement à la seconde tentative.

    2° enfin je recupere un lien et non un objet flash que nous pourrions ensuite editer via le plugin flash, mais pour cela il faudrait pouvoir recupperer l’URL dans le plugin.

    Voila merci pour vos reponses
    Pat

  27. Pour conclure
    Je pense qu’il y a des pbs de compatibilite entre les versions de TinyMCE et WordPress.

    Je recherche donc une version de TinyMCE intégrant le module MEDIA 100% compatible avec WP 2.0.5

    Car après avoir test les versions 2.0.8, 2.0.7, 2.0.6 et 2.0.5 de TinyMCE avec WP 2.05 j’ai tjrs la meme erreurs, impossible de transferer a partir du uplaod le media directement dans la zone editeur de l’ecriture d’un article.

    Cela fonctionne correctement avec les plugins de base de la WP 2.0.5 je peux correctement envoyer du mode uplaod un flash ou une video dans l’article mais je ne peux avoir le plugin MEDIA qui offre les fonctions de positionnement du media, de placement et de resizing

    MErci
    Pat

  28. Pour repondre à Guigui et a Labnum
    J’ai suivis a la lettre la procedure d’installation.
    Ok j’ai bien ma barre de tache avec toutes les nouveaux plugin de TinyMCE mais , lorsque je selectionne cette fois dans WP 2.05 sous l’article dans le mode UPLAOD un flash ou un MEDIA, et que je lui demande de l’envoyer a l’editeur, j’ai le media qui est envoye non pas dans l’editeur mais qui reste dans le iframe du mode UPLOAD et deuxiement Impossible d’editer les options du media via le plugin correspondant.

    Hormis cette incopatibilité avec WP 2.0.5, le reste fonctionne

    Pat

    http://www.wordpress-fr.net/20.....s-tinymce/

  29. Bonjour,
    Je l’ai installé sur la version 2.1 de WordPress et ça ne marche pas, c’est normal ?
    Merci pour tout

  30. Oui, c’est normal.
    C’est uniquement pour WordPress 2.0.x

    Je reparlerai de l’éditeur visuel prochainement sur le blog.

  31. Bonjour.

    Je n’arrive pas à utiliser les fonctions « read more »… quelque’un est-il dans le même cas que moi ?

    Merci.

  32. Hello,

    Je viens juste d’installer le plugin (2.0.9)dans WordPress 2.1 .
    J’ai bien effectué tout ce qui est demandé y compris le choix dans tiny_mce_gzip.php.
    Eh bien, seule la version originelle apparait…
    Des suggestion?

  33. Mon hack n’a pas été testé sous WP 2.1

    Il y aura un article similaire pour WP 2.1 d’ici la fin de semaine…

  34. cereluna 16/02/07 - 22:05

    Bonsoir,

    Désoler mais avez vous sorti le pluggins pour tinymce pour la version WP2.1 je ne la trouve pas.

    Merci

    Cereluna

  35. skydevforum 28/02/07 - 13:38

    Bonjour à tous,

    J’aimerais bien étendre l’éditeur visuel avec les icones tout comme chez TinyMCE pour WordPress Version 2.1. J’ai essayé avec vos astuces mais ça ne marche pas :-(.

    J’attendrais bien une mise à jour de votre plugin très bientôt.

    Pourquoi pas créer un plugin ou on peut activer, désactiver même configurer via l’interface administration de wordpress.

    Merci à vous et bonne après midi.

    Fred

  36. Oui, moi aussi j’attends la version pour wordpress 2.1 avec imapatience !!!!!!
    En tous les cas merci bcp pour les infos et très bien expliqué.

  37. J’ai suivi la procédure et ça ne marche pas non plus (WP 2.1.2), impossible d’écrire dans la zone de texte, les boutons ne marchent pas

  38. Romain > La manipulation décrite ci-dessous ne fonctionne que sur les versions de WP 2.0.x et tu es en 2.1.x. C’est donc normal que cela ne marche pas…

  39. Toujours pas de version pour WP 2.1 ??

    Merci et bon courage !

  40. Bonjour,

    Moi j’ai carrément un bug avec le tinyMCE de base de mu wordpress 1.2.1 (basé sur wordpress 2.1.2) avec la traduction française de wordpress. Du coup j’aimerai tenter de mettre à jour TinyMCE, cela reglera surement mon problème

    qq news sur l’article qui expliquera prochainement comment upgrader TinyMCE ?

    Par avance merci

  41. Bonjour,
    Premièrement je tiens à vous féléciter pour le travail et les tutos que vous partagez sur wordpress.
    Deuxiémement, je souhaitais savoir si une nouvelle version de votre plugin été à l’ordre du jour pour la version 2.3.2 de wordpress car comme vous le soulignez l’éditeur par défaut est assez pauvre . Merci

    Cordialement
    PiErO
    http://www.lagazettesportive.fr

  42. Pour étendre les fonctionnalités de tinymce avec wordpress 2.3.2, j’ai installé le plugin tinymce-advanced
    http://wordpress.org/extend/pl.....-advanced/
    Facile d’installation et de configuration

    Yohan

  43. +1 pour le plugin du post du dessus, il fait de l’éditeur un éditeur complet et personnalisable à souhait; seul bémol un plugin de plus qu’y ralentit ( en tout cas sur mon site) l’édition de post.

  44. studio54 31/10/08 - 13:13

    cette astuce ne fonctionne pas pour WordPress 2.6.x

    dommage, l’éditeur ne change pas…

  45. Salut, moi sous wordpress 2.6.3 tinymce ne marche pas, j’ai essayé plusieurs navigateur sans resultats. J’ai uploader le plugin par ftp dans le dossier plugins et tjs rien, j’ai besoin de votre aide, Merci d’avance.

  46. Entropie 17/02/09 - 14:15

    Il existe une excellente alternative à TinyMCE: FCKEditor (http://www.fckeditor.net/), qui saccage beaucoup moins le code HTML, et est, selon moi, beaucoup plus complet… et de surcroît compatible avec la toute dernière version de WordPress à ce jour où j’écris ces lignes (càd. la 2.7.1).

    Pour l’intégrer sous forme de plug-in, rien de plus simple :
    => http://www.deanlee.cn/wordpres.....ess-plugin

  47. L’article a bientôt 3 ans :)

    Fckeditor n’est certainement pas mieux, 99% des plugins sont incompatibles avec…

    Je ne vois pas vraiment l’intérêt.

  48. Catherine Denos 02/06/09 - 15:54

    Bonjour,
    Y-a-t-il des plug-ins contre-indiqués pour que tinymce fonctionne ? Je suis sous WordPress 2.7.1 et j’utilise NAVT navigation list et table reloaded (dont je n’aurais plus besoin si je pouvais utiliser le tinymce) et lorsque j’installe tinymce en suivant les instructions, mon editeur de texte ne change pas, sauf l’icône « more » qui a disparu … J’ai essayé à de nombreuses reprises, y compris en désactivant le plugin table reloaded, sans succès …
    J’y suis depuis ce matin ! Si quelqu’un a une idée, ça m’arrangerait bien !!

  49. dussaussois 30/09/09 - 12:58

    un petit coup de main:

    j’ai (à priori) bien suivi le protocole, mais je bute sur une étape : au point 9 , il faut éditer le fichier “tiny_mce_gzip.php”. Comment faire pour « éditer »?
    Du coup, je n’arrive pas à effectuer le point 10 (selectionner l’interface de votre choix).
    mes questions peuvent paraître un epeu idiotes aux pro de WP; désolé
    d’avance merci pour vos réponses

  50. Cette astuce n’est plus valable depuis très longtemps !

    Utilise plutôt le plugin :
    http://wordpress.org/extend/pl.....-advanced/

  51. Sébastien 14/10/09 - 20:21

    Cela fonctionne toujours avec la version 2.8 de WordPress ?

    Merci

  52. Bonjour,

    et bien moi j’ai bien tout suivi scrupuleusement et je n’ai pas réussi. Mon éditeur visuel disparait complètement.
    Alors par la suite, j’ai refait la manip mais cette fois sur l’ancien fichier tinymce, c’est à dire que je n’ai rien écrasé. Cette fois mon éditer visuel n’a pas changé, il est resté le meme.

    Alors que dans les deux cas j’ai bien codé le fichier « tiny_mce_gzip.php »

    Je ne comprends pas bien, aidez moi s’il vous plait :)

  53. haha, excusez moi, je viens de voir les derniers commentaires.

    Bon, encore désolée (surtout pour moi, vu que j’ai passé deux heures dessus… tss ça m’apprendra !)

    Je vais essayer l’advanced. :)

  54. Juste ce petit message pour dire qu’avec la version WP3 il y a un plugin tinyMCE-Advanced qui fonctionne très bien sans aucune manipulation de code. Il se télécharge ici http://wordpress.org/extend/pl.....-advanced/

  55. tchancayre 06/11/10 - 10:17

    Personnellement j’ai essayé d’installer la dernière version pour WP 3.01 cela ne fonctionne pas.
    je sais pas ce qu’il faut faire…… dommage

  56. POur que TinyMCE-Advenced fonctionne il faut que ce soit la version de WP3 de TinyMCE qui soit en place et pas les modification décrites ci-dessus.

  57. Bonjour et bravo !

    C’est très riche et ne sais toujours pas comment changer la couleur du titre d’un article. Merci de m’aider.

  58. Bonjour,
    Comment rendre le mot « lire la suite » visible sur la page index ?

  59. Bonjour, je cherche une solution pour ce problême : j’édites mon contenu que sur l’éditeur html, mais si je repasses en mode wisywig, et que je rebascules sur l’éditeur html, il y a plein de balises p qui s’insèrent.
    Comment faire ?
    merci pour vos réponses

Les commentaires sont fermés.

écrire un commentaire