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

Aucune discussion

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