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 > Porte Plume > Porte Plume : créer une nouvelle barre

Porte Plume : créer une nouvelle barre

12 avril 2016 – par peetdu

12 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Ceci est un tutoriel pour créer ex nihilo une nouvelle barre d’outils d’aide à la rédaction.
Il est également question de voir comment charger cette nouvelle barre sur les champs de votre choix, et gérer les traitements typographiques liés aux nouveaux boutons.

1- Créer une nouvelle barre

Pour cela, vous devez créer deux répertoires dans le dossier /squelettes de votre site ou à la racine de votre plugin.

/barre_outils
Il contiendra le fichier ma_barre.php.

Pour la constitution de ce fichier, voir le paragraphe « Exemple de déclaration d’une barre » dans la documentation technique du Porte Plume.

/icones_barre
Il contiendra les fichiers images correspondants aux boutons de votre barre.
Ex : noisette.png, noix.png, etc.

Ces images ont une dimension de 16x16 pixels.
L’idéal est de faire le symbole en 14x14 px et de le centrer dans un fond transparent de 16x16 px.

2- Charger votre nouvelle barre

Cet appel se fait via un javascript. En fonction de votre besoin, il existe deux méthodes pour intégrer ce script.

1re méthode : chargement directement depuis le fichier mon_formulaire.html
Cette méthode est la plus rapide à mettre en place, mais il est conseillé de ne l’utiliser que si vous compter charger votre nouvelle barre dans un seul formulaire.
Sinon, privilégiez la seconde méthode décrite plus loin.

Avec cette méthode, il vous suffit d’intégrer le code suivant dans le fichier .html de votre formulaire :

  1. <script>
  2. /*<!\[CDATA\[*/
  3. jQuery(document).ready(function() {
  4. function appel_barre(){
  5. $('.formulaire_mon_formulaire textarea[name=mon_champ]').barre_outils('ma_barre');
  6. }
  7. appel_barre();
  8. onAjaxLoad(appel_barre);
  9. });
  10. /*]]>*/
  11. </script>

Télécharger

  • function appel_barre : le nom appel_barre est ici arbitraire. Donnez lui le nom que vous voulez ;
  • .formulaire_mon_formulaire : remplacer ici la partie mon_formulaire par le nom de votre formulaire ;
  • mon_champ : à remplacer par le nom (attribut name) de votre champ ;
  • ma_barre : à remplacer par le nom que vous avez donné à votre barre.

Dans le même formulaire, vous pourrez charger votre barre sur autant de champ que vous voulez, à condition de rajouter une déclaration pour chaque champ.

  1. $('.formulaire_mon_formulaire textarea[name=deuxieme_champ]').barre_outils('ma_barre');
  2. $('.formulaire_mon_formulaire textarea[name=troisieme_champ]').barre_outils('ma_barre');

Télécharger

2e méthode : chargement depuis n’importe quel formulaire...
...grâce à la création de classes CSS génériques d’application [1].

Pour cela, vous devez créer un fichier barre_ma_barre.js dans le dossier /squelettes/javascript de votre site ou dans le dossier /mon_plugin/javascript de votre plugin.

  1. (function($){
  2. $(document).ready(function(){
  3. function charger_barre(){
  4. $('.formulaire_spip textarea.inserer_ma_barre').barre_outils('ma_barre');
  5. }
  6. charger_barre();
  7. onAjaxLoad(charger_barre);
  8. });
  9. })(jQuery);

Télécharger

Enfin vous devez charger ce fichier JS dans l’espace privé. Là aussi deux méthodes sont possibles :
-  Pour les version de antérieures à 3.1, vous devez utiliser le pipeline header_prive
-  Depuis SPIP 3.1, vous pouvez déclarer l’appel de ce fichier en utilisant la balise <script> décrite dans Rédaction du paquet.xml
exemple :
<script source="../plugins/mon_plugin/javascript/barre_ma_barre.js" type="prive" />

Une fois que tout ceci est fait, vous pouvez charger votre nouvelle barre dans n’importe quel champ de n’importe quel formulaire, en ajoutant simplement la classe .inserer_ma_barre dans le champ voulu.

Exemple :

<textarea name="infos" class="inserer_ma_barre"  id="champ_infos" rows="4" cols="40" >

Exemple en utilisant le plugin Saisies

  1. [(#SAISIE{textarea, infos, obligatoire=oui,
  2. label=<:prefixe:champ_infos_label:>,
  3. class=inserer_ma_barre, rows=4})]

Télécharger

3- traitements typographiques des nouveaux boutons

Il s’agit maintenant de créer et d’activer le rendu des traitements typographiques liés à vos nouveaux boutons aussi bien dans la partie publique que dans les vues Voir et Plein écran de l’interface de rédaction du back-office de votre formulaire.

Vous faites ainsi d’une pierre deux coups : un seul code pour la partie publique et privé.
Et vous améliorez surtout l’expérience utilisateur de vos rédacteurs.

Explications par l’exemple

Imaginons une nouvelle barre intégrant un bouton ’buste’.
L’objet de ce bouton est de rajouter un picto ’buste’ à la suite de votre texte.

La barre chargée
Nouvelle barre de typo
petite note : Le tag <buste> est choisi pour sa valeur WYSIWYM (What You See Is What You Mean).

La barre en mode ’Voir’
Rendu dans l'espace privé

Note : pour le rendu dans l’espace privé, vous devez penser à intégrer les styles correspondants dans l’espace privé.

Le rendu dans l’espace publique
Rendu dans l'espace public

Le code HTML attendu est celui-ci :

<p>1-2<i class="icon-user"></i></p>

On va donc créer la fonction suivante et la placer mes_options.php, :

  1. function typo_nom_de_mon_champ($texte) {
  2. $texte = preg_replace('/<\/buste>/i', "&nbsp;<i class='icon-user'></i></p>", $texte);
  3. $texte = preg_replace('/<buste>/i', '<p>', $texte);
  4. return $texte;
  5. }

Télécharger

Puis, appliquer ce traitement typo sur le champ qui charge ma nouvelle barre, en l’occurrence ci-dessous, le champ INFOS.

  1. $interfaces['table_des_traitements']['INFOS'][] = 'typo_nom_de_mon_champ(%s)';

Ce code sera intégré le plus souvent via le pipeline declarer_tables_interfaces

Pour plus d’explication sur ce dernier point reportez-vous à la documentation sur les Traitements automatiques des balises

Notes

[1Cette méthode reprend d’une façon simplifiée les explications données dans le paragraphe Fonctionnement dans la documentation technique du Porte Plume.

Dernière modification de cette page le 8 mai 2016

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

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à