SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 278 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

13 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 ?
  • [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

  • Facteur

    21 janvier 2010 – 383 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Albums 3

    8 août 2014 – 224 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • ciag : plugin « Groupes d’auteurs »

    30 novembre 2011 – 22 commentaires

    Ce plugin facilite l’affectation des auteurs aux rubriques, via des groupes d’auteurs. Il offre également des vues globales des affectations de rubriques aux auteurs. Les objectifs de ce plugin Le premier objectif est de faciliter (...)

  • Tickets, suivi de bugs

    28 novembre 2008 – 45 commentaires

    Tickets est un outil de suivi de bugs directement intégré à l’espace privé de SPIP. Il est conçu pour faciliter la phase de développement du site (notamment les squelettes du site public). Tickets est un système simple de suivi de bugs directement (...)

  • Titre de logo v2

    23 mai 2014 – 17 commentaires

    La version 2 du plugin Titre de logo reprend les mêmes fonctions que la v1 mais étend le titre et le descriptif aux logos de tout objet éditorial de SPIP. Vous pouvez toujours vous référer à l’article de la version 1 pour retrouver les fonctions (...)