SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 178 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > TinyMCE > TinyMCE pour SPIP

TinyMCE pour SPIP

20 novembre 2012 – par PieroWbmstr – 10 commentaires

8 votes

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 : http://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) :

  1. <span class="spiptmceInsert">
  2. <embXXX|center>
  3. </span>

Télécharger

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 :

  1. // liste des plugins
  2. plugins : "spip, (vos autres plugins ...)",
  3.  
  4. // barre de boutons XX
  5. theme_advanced_buttonsXX : "spipinsert,|,spip,|, (vos autres boutons ...)",

Télécharger

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.

Voir en ligne : http://plugins.spip.net/tinymce

P.-S.

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

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.

Dernière modification de cette page le 20 novembre 2012

Retour en haut de la page

Vos commentaires

  • Le 24 février à 22:02, par vincort En réponse à : TinyMCE pour SPIP

    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

    • Le 25 février à 08:38, par PieroWbmstr En réponse à : TinyMCE pour SPIP

      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 :(

      @+

    • Le 29 mars à 14:53, par Marco En réponse à : TinyMCE pour SPIP

      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

  • Le 17 mars 2015 à 21:37, par triton En réponse à : TinyMCE pour SPIP

    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

  • Le 24 septembre 2014 à 16:50, par Marco En réponse à : TinyMCE pour SPIP

    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...

    • Le 25 septembre 2014 à 17:22, par PieroWbmstr En réponse à : TinyMCE pour SPIP

      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

  • Le 31 juillet 2014 à 14:34, par yannick En réponse à : TinyMCE pour SPIP

    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

  • Le 5 septembre 2013 à 10:46, par sebval En réponse à : TinyMCE pour SPIP

    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

  • Le 1er juillet 2013 à 22:35, par Arnaud En réponse à : TinyMCE pour SPIP

    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

  • Le 21 mars 2013 à 17:39, par Cédric Couvrat En réponse à : TinyMCE pour SPIP

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • CKeditor 3.0

    4 octobre 2009 – 1217 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1284 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIPr

    23 mars 2015 – 75 commentaires

    SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP. Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide. Documentation source : (...)

Ça spipe par là