TinyMCE pour SPIP

Cette contribution surcharge des fichiers et/ou des fonctions de SPIP : il n’est donc pas garanti qu’elle fonctionne avec d’autres contributions surchargeant lesdits fichiers et/ou fonctions. Sa compatibilité avec les versions de SPIP est donc assez restreinte.

Ce plugin permet d’utiliser l’éditeur WYSIWYG de la librairie TinyMCE pour l’édition des contenus dans l’espace privé de SPIP.

L’utilisation de ce plugin modifie grandement la gestion typographique des contenus par SPIP ; pour plus d’info, lisez le chapitre Avertissements & Restrictions.

Installation

  1. Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html

Vous pouvez aussi le charger automatiquement via l’onglet « Ajouter des plugins » de la page « Gestion des plugins » depuis l’espace privé de SPIP (cette méthode a l’avantage de vous permettre de le mettre à jour automatiquement).

Utilisation / Configuration

Dès son activation, le plugin remplace la barre de boutons par défaut du Porte plume sur certaines pages d’édition des objets SPIP . Vous pouvez choisir sur quels objets TinyMCE sera utilisé en remplacement de cette barre depuis la page de configuration du plugin.

Sur cette page de configuration, vous pouvez également définir la classe CSS et l’ID du champ édité ainsi que le thème utilisé pour la barre TinyMCE. Par défaut, ces valeurs sont choisies pour correspondre aux squelettes de la distribution de SPIP.

Chaque rédacteur ou utilisateur de l’espace privé de SPIP peut également choisir d’utiliser ou non cet éditeur depuis ses préférences personnelles.

Restrictions / Avertissements

TinyMCE est un éditeur « WYSIWYG » (littéralement « what you see is what you get » : « ce que vous voyez est ce que vous aurez ») [1]. Il génère donc un texte contenant des balises HTML complètes et propose plus de possibilités d’actions sur les contenus que la barre d’édition par défaut de SPIP. SPIP n’est donc pas prévu pour prendre en charge ce genre de contenus, notamment au niveau des styles typographiques livrés avec la distribution.

Il est possible de faire cohabiter dans un même contenu des notations typographiques de SPIP et des codes HTML directs, mais l’homogénéité du rendu n’est pas assuré. De plus, vous devez protéger les notations SPIP pour éviter la transformation de certains caractères en entités HTML équivalentes. Pour plus d’information à ce sujet, lisez le chapitre Protection des tags SPIP.

La configuration par défaut du plugin tente de ne pas casser l’homogénéité des contenus de SPIP et sa façon de les traiter, notamment en termes typographiques. Un bouton est ajouté aux barres du plugin pour revenir si besoin à la barre d’édition par défaut du Porte plume.

Modifications du code de SPIP

Le plugin surcharge la page de gestion des préférences utilisateur de l’espace privé de SPIP en ajoutant une sélection de barre d’édition par défaut. Cela permet au cas par cas de choisir d’utiliser la barre TinyMCE ou non. Cette surcharge peut entrainer des conflits avec celles d’autres plugins et poser des problèmes de rendu en faisant cohabiter du code HTML et des raccourcis typographiques de SPIP, comme expliqué dans le chapitre Avertissements/Restrictions.

La situation typique est l’utilisation de la barre d’édition de TinyMCE par les rédacteurs, susceptibles d’avoir moins l’habitude de gérer une notation en raccourcis typographiques, et l’utilisation de la barre du Porte-Plume par les administrateurs, qui ont cette habitude et préféreront garder un contrôle complet sur les rendus. La difficulté pour ces derniers est alors de conserver le code HTML du rédacteur tout en corrigeant ou modifiant le contenu.

Protection des tags SPIP

1. Le plugin TInyMCE pour SPIP

Les tags SPIP comme les inclusions de modèles, de documents ou d’images sont considérés par TinyMCE comme des tags non-HTML et seront donc échappés dans le rendu final du contenu (les caractères ’>’ et ’<’ seront transformés en entités HTML). SPIP ne pourra plus les considérer comme des tags internes et ne fera plus le remplacement par le modèle adéquate.

Pour pallier à ce problème, vous devez inclure les tags SPIP dans une SPAN portant la classe « spiptmceInsert » de la façon suivante (exemple d’un document) :

<span class="spiptmceInsert">
    <embXXX|center>
</span>

Le plugin effectue cette protection automatiquement lors du double-clique sur un code d’inclusion de document tels qu’ils sont proposés dans la colonne de gauche des pages d’édition de SPIP.

2. Le plugin SPIP pour TinyMCE

Le plugin (pour SPIP) est livré avec un plugin TinyMCE (pour l’éditeur) pour faciliter cette protection. Il propose notamment un bouton ouvrant une zone de saisie spécifique pour insérer vos codes SPIP. Cette zone de saisie s’ouvre automatiquement lors d’un double-clic sur un code déjà inséré pour vous permettre de le modifier en conservant la protection. Voyez le chapitre Personnalisation pour l’inclusion des boutons dans les barres TinyMCE.

D’un point de vue technique, le plugin SPIP pour TinyMCE ajoute deux nouvelles commandes à l’éditeur :

  • « spip_back_barre » qui recharge la page en demandant à SPIP de revenir à la barre par défaut du Porte plume,
  • « spip_insert_code » qui ouvre la fenêtre de saisie des tags SPIP pour les protéger avant insertion dans le contenu.

Deux boutons sont également ajoutés :

  • « spip » qui exécute la commande « spip_back_barre »,
  • « spipinsert » qui exécute la commande « spip_insert_code » en travaillant directement sur le contenu sélectionné le cas échéant.

Il est conseillé d’inclure le plugin et les boutons dans toutes les barres TinyMCE que vous définissez (cf. chapitre Personnalisation), de la façon suivante :

// liste des plugins
plugins : "spip, (vos autres plugins ...)",

// barre de boutons XX
theme_advanced_buttonsXX : "spipinsert,|,spip,|, (vos autres boutons ...)",

Personnalisation

Vous pouvez créer vos propres configurations de la barre TinyMCE (choix des boutons et des plugins utilisés) en créant un squelette selon la méthode définit ci-dessous ; vos squelettes seront ajoutés automatiquement aux propositions de la page de configuration du plugin.

Pour définir une nouvelle barre TinyMCE :

  • créez un répertoire « fonds/tinymce/ » dans votre répertoire de squelettes,
  • copiez l’un des squelettes proposés par le plugin (dans le répertoire « fonds/tinymce/ » du plugin) et placez-le dans votre répertoire en le renommant [2],
  • éditez-le en indiquant les plugins et les listes de boutons selon vos besoins.

Vos squelettes personnels ne doivent définir que la liste des plugins et les différentes lignes de boutons de l’éditeur, le reste est configuré globalement pour compatibilité. Pour un tutoriel sur cette gestion des barres d’édition TinyMCE voyez la page http://www.tinymce.com/tryit/full.php.

Voyez le chapitre précédent pour inclure les fonctionnalités du plugin SPIP pour TinyMCE et proposer ses boutons.

Conditions d’utilisation

La librairie TinyMCE est mise à disposition sous licence LGPL ; pour plus d’informations, voir le site http://www.tinymce.com.

Notes

[1Pour plus d’info sur l’acronyme « WYSIWYG », voyez la page de Wikipédia http://fr.wikipedia.org/wiki/What_y....

[2Le nom de chaque squelette définissant une configuration TinyMCE doit être unique pour pouvoir être proposé dans la page de configuration.

TODOS

Liste non-ordonnée des « choses à faire » dans les prochains développements du plugin :

  • créer un bouton dans la barre TinyMCE pour revenir à la barre du porte-plume. : OK en version 0.9.1
  • créer un bouton dans la barre du porte-plume pour faire l’inverse
  • pouvoir choisir la barre chargée avec l’argument d’URL définit dans « options.php »
  • gérer le problème de dimensions des zones de texte, qui semblent s’obstiner à être un peu trop larges : OK en version 0.9.3
  • créer un bouton dans l’éditeur pour protéger automatiquement les tags SPIP : OK en version 0.9.4

Discussion

8 discussions

  • Francis

    Bonjour,
    Comment on fait marcher ce plusgin dans un spip 3.1 ??
    Merci.

    Répondre à ce message

  • 2

    Bonjour,
    Impossible d’inserer une image avec tinymce
    Je suis obligé d’utiliser les fonctions spip
    Comment utiliser inserer/editer une image en se référant à la médiathèque de spip, donc à des images du répertoire IIMG ?
    Merci d’avance

    • Salut Vincort,
      Malheureusement, je n’ai pas le temps de maintenir ce plugin :(
      Mais si un dev (ou toi) veut le reprendre, c’est sans problème !

      Pour ton souci précis, il va falloir aller voir le code source :(

      @+

    • Bonjour.

      Il existe une possibilité. Pour un rédacteur lambda cela peut être fastidieux mais pour un webmestre, je ne crois pas ;-)

      1) Trouver l’url de l’image (pas sa vignette ;-)
      a) Soit aller dans la médiathèque et choisir son image en cliquant dessus. Elle devrait s’afficher dans une popup ;
      b) Soit dans l’article, cliquer sur l’image « accrochée » à l’article.

      Dans les deux cas, on a l’url de l’image.

      2) Il n’y a plus qu’à copier/coller dans « l’insertion d’image » de TinyMCE et de manipuler comme on le sent.

      Pour info : Ce plugin est compatible avec la 3.1.x. Il suffit de changer la valeur qui va bien dans le xml.

      A++

    Répondre à ce message

  • Bonsoir,
    Impossible de faire apparaître la barre d édition tinymce sur le formulaire d édition des événements (plugin agenda) ? Meme en essayant de l envoyer de force dans « objets_barres » ... Je ne comprends pas non plus pourquoi « evenement » n’apparait pas dans la liste des objets spip, alors qu il semble déclarer en tant que ’principal’ par le plugin agenda...
    Plus globalement, y a une methode pour ajouter l editeur tinymce sur un nouvel objet ?
    Amicalement
    triton

    Répondre à ce message

  • 1

    Bonjour à tous.

    Merci pour ce plugin que je viens de découvrir (début septembre 2014)...
    C’est vrai que je me débattais depuis des années avec (F)CKEditor pendant ce temps là ;-)

    Juste une question : Ce plugin est-il maintenu ?

    J’ai bien vu une modif du 4 septembre mais franchement mineur (chaine de car dans le xml).

    Longue vie à ce travail...

    • Bonjour Marco,

      Tout ce que je peux dire c’est que je ne le maintiens plus :( et aux vues des commits, je n’ai pas l’impression que quelqu’un le fasse évoluer ... Si tu veux en récupérer le développement, c’est avec plaisir ;)

      @+

    Répondre à ce message

  • Merci pour ce plugin, trés bonne alternative à ckeditor.

    mais je n’arrive pas à l’activer dans les crayons
    quelqu’un aurait-il rencontrer ce pb ?
    une solution ?

    merci d’avance

    Répondre à ce message

  • Bonjour
    J’utilise ce plug-in pour faciliter la modification des articles. Le problème se pose quand on échappe les balises spip avec spiptmceInsert et que l’on veut appliquer un style plus loin dans l’article en se servant des boutons de tinymce, en effet ce style est appliqué au moyen de balises.
    A l’enregistrement de l’article, toutes les balises html qui se trouvaient entre spiptmceInsert
    et le dernier span recontré dans l’article disparaissent. Il m’est donc impossible d’appliquer un style à un texte qui se trouverait après une balise spip échappée au moyen de spiptmceInsert.

    Répondre à ce message

  • Bravo,

    Je suis ravi de voir votre plugin qui va me permettre de tester SPIP3.

    En effet, j’étais resté à SPIP2 par manque de temps pour porter mon plugin TinyMCE ... dont les responsables de ce site contrib n’avaient pas voulu faire la publication en 2006.

    Si SPIP avait un éditeur WYSIWYG intégré, il serait sans nulle doute beaucoup plus répandu.

    Répondre à ce message

  • Ravis de voir que que je ne suis pas le seul à utiliser TinyMce dans spip
    et merci pour ce plugin

    Avec l’ancienne version de tinymce j’utilisais la fonction clean_up_callback
    afin d’éviter que les balises de modeles ne soient cassées et cela de façon automatique et transparente pour l’utilisateur.

    Une idée pour faire ça à nouveau ?

    Voici le fichier de config tiny_mce_config.js que j’utilisais.

    Grand merci et bonne continuation

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom