Installation
- Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
- 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.
Discussions par date d’activité
8 discussions
Bonjour,
Comment on fait marcher ce plusgin dans un spip 3.1 ??
Merci.
Répondre à ce message
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
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 :
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.
Suivre les commentaires : |