Porte plume

Une barre d’outils pour bien écrire…

Le plugin « porte-plume » ajoute à l’interface une barre d’outils sur certains champs de saisie.Plus que de simples boutons, cette extension facilite la rédaction, par exemple en continuant automatiquement les listes d’éléments, comme le ferait un logiciel de traitement de texte.

Ce plugin fonctionne avec les versions de SPIP suivantes :

  • 2.0 (à installer en tant que plugin avec le zip ci-contre par exemple)
  • 2.1 (présent par défaut en tant qu’extension)
  • depuis 3.0 (présent par défaut en plugins-dist) [1]

Barre d'outil Porte-plume

Téléchargement du plugin

L’archive du plugin se récupère ici : Porte Plume (zip) [2]

Solution technique retenue

La barre d’outils est entièrement écrite en jQuery, et s’appuie sur la librairie javascript « MarkitUp ». Cette barre d’outil est extensible et modulaire : vous pouvez lire la documentation technique du Porte-plume pour plus de précisions sur l’interface de programmation proposée.

Possibilité de visualisation

Deux onglets dans la partie privée permettent de passer de l’espace de saisie au rendu généré.

Barre d'outil Porte-plume - aperçu

Facilités de saisie

Le porte plume regorge de petites fonctionnalités très discrètes mais qui améliorent grandement la saisie :

  • chaque bouton peut avoir un raccourci clavier,
  • lorsque votre curseur est sur un mot et que vous cliquez le bouton « gras », le mot est automatiquement sélectionné ; idem si vous utilisez le raccourci Control+B,
  • lorsque votre curseur est sur une ligne et que vous cliquez le bouton « intertitre », toute la ligne est automatiquement sélectionnée,
  • si vous commencez une liste à puce et que vous appuyez la touche « entrée », la liste se poursuit automatiquement,
  • si vous avez une liste qui n’a pas encore les caractères « -* », vous pouvez sélectionner toutes les lignes et cliquer l’icône liste. Toutes les lignes deviendront un élément de liste ; cela fonctionne aussi avec l’indentation des listes,
  • shift+entrée effectue un saut simple et non un saut de paragraphe (à éviter d’utiliser !!)

Certaines fonctionnalités ne fonctionnent pas avec le navigateur Opéra.

Notes

[1Il est inutile de vouloir le ré-installer ; par contre, vous pourrez vouloir y ajouter des barres d’outils : voir Porte Plume : créer une nouvelle barre comme tutoriel exemple...

[2Inutile de le faire en SPIP 3.x.x, car celui-ci est devenu natif à spip

Dernière modification de cette page le 16 mars 2019

Discussion

49 discussions

  • 2

    BUG : Sur SPIP 2.1.11 [18566] de base et avec IE8.

    Quand on clique sur le bouton intertitre de la barre d’outil sans sélection dans le texte, le curseur étant sur la ligne et après N caractères : les N premiers caractères de la ligne ne sont pas placer entre les accolades et les N de la ligne suivante sont pris, avec N=le nombre de retour chariot depuis le début de texte jusqu’au curseur.

    Si le curseur est avant, c’est comme s’il était sur la ligne précédente après N caractères. Idem pour gras et italique mais au niveau du mot !!!.

    • En effet j’ai aussi ce bug sous IE8 avec spip 2.1.12

    • Toujours le même problème avec SPIP 2.1.15, bien amélioré avec SPIP 3.0.1 auquel il ne reste d’un effet de bord.

      SPIP 2.1.15 : cela ce situe au niveau de la sélection automatique du porte plume qui dérive d’autant de caractère que de retour chariot depuis le début du texte par rapport au curseur.

      SPIP 3.0.1 : seul la fin dérive si et seulement si le curseur est en fin de ligne.

      La version pour SPIP 3 est-elle portable pour SPIP 2 en copiant certains fichiers, je pense surtout à ’jquery.markitup_pour_spip.js’ ?

      J’en profite aussi pour demander à quoi sert le fichier ’jquery.markitup.js’ car on utilise seulement le ’pour_spip’ non ?

    Répondre à ce message

  • 2
    amaury1

    Le lien de téléchargement est mort ...
    Est-ce que quelqu’un pourrait le remettre ou m’envoyer le zip svp ?

    Merci ! :-)

    Répondre à ce message

  • dans extensions/porte_plume/css/barre_outils.css
    ligne 37, sélecteur .markItUp .markItUpResizeHandle
    dans ce sélecteur, on lit l’instruction
    cursor:ns-resize;

    or l’attribut cursor ne connaît pas l’instruction « ns-resize » (http://www.w3schools.com/cssref/pr_class_cursor.asp)
    et le validateur css indique une erreur

    Répondre à ce message

  • Nicolas Kempf

    Hum... Est-ce que dans la prochaine version, on pourra rajouter le caractère « points de suspension » au pavé des caractères spéciaux (html : … ) ?

    Répondre à ce message

  • Pour info !
    Je ne sais pas si cela serait un plus de faire une mise à jour, mais en lisant le read me dans le fichier markitup, il semble que cela soit la librairie en version 1.1.3 qui soit utiliser.

    La dernière version stable est la 1.1.11
    http://markitup.jaysalvat.com/home

    markItUp ! 1.1.11

    CHANGE LOG
    markItUp ! 1.1.11 2011-07-19
    -  Enabled parsing the markup in javascript (amroth)
    -  Added multiline support (alevchuk)
    -  Updated with jQuery 1.6.2
    -  Added quotes to attribute selectors
    -  Tried to fix the endless IE caret position bug
    -  Added metakey support for Mac users (michal-krause)

    markItUp ! 1.1.10 2011-02-20
    -  Improved : Ajax property ’dataType’ set to ’text’
    -  Improved : Ajax property ’global’ set to ’false’
    -  Fixed : Ctrl+click selection problem

    markItUp ! 1.1.9 2010-11-04
    -  Improved : Selection accuracy in Internet Explorer
    -  Improved : Replace focusin() by bind(’focusin’) to solve some backward compatibility issues (Nick B. C.)
    -  Cosmetic : Add new logo
    -  Cosmetic : Remove jQuery library and use CDN

    markItUp ! 1.1.8 2010-08-27
    -  Improved : Some skin PNG have been optimized (lukescammell)
    -  Fixed : Opera 10 selection bug (Marius G.)
    -  Fixed : Accessibility issue with the background default color in the default skin
    -  Improved : Avoid giving the preview focus each time autorefresh kicks in. It still gets the focus when the preview button is pressed (DrSlump)
    -  Improved : In pop-up mode the preview is closed when the page containing the editor is unloaded (DrSlump)
    -  Improved : Press TAB jump right inside the textarea (Yakir)

    markItUp ! 1.1.7 2010-04-06
    -  Fixed : Empty lines are removed at insertion on Webkit
    -  Fixed : Focus lost when shortcut is used on FF
    -  Fixed : var missing before $$ in markItUpRemove()

    markItUp ! 1.1.6 2010-01-12
    -  Improved : Ajax requests are now asynchronous
    -  Fixed : Double empty line problem with preview and parsers
    -  Fixed : IE8 now close the preview properly

    markItUp ! 1.1.5 2009-05-01
    -  Modified : http://drupal.org/project/wysiwyg compatibility
    -  Modified : Alt/Ctrl/Alt+Tab are now disabled

    markItUp ! 1.1.4 2008-12-03
    -  Fixed : Extra quote deleted line 95

    Répondre à ce message

  • Bonjour,
    Est-il possible ou bien est-il prévu d’avoir un menu déroulant dans la barre d’outils listant les éventuels modèles à disposition pour pouvoir les insérer dans le texte ?

    Merci.

    Répondre à ce message

  • 5

    Les deux états « Editer / Voir » induisent une grande confusion dans l’esprit des rédacteurs. Comment supprimer ces onglets ?

    • Bonjour,

      Pour la plupart des utilisateurs de nos 80 sites SPIP les rédacteurs et administrateurs apprécient énormément les deux onglets « Editer / Voir ».

      Pour nous ils sont très précieux et permettent en partie de faire face à la demande chronique de Wysiwyg (CKeditor) pour lequel nous sommes réticents et que nous n’activons qu’avec grande parcimonie.

      Donc, surtout, ne supprimez pas les deux onglets « Editer / Voir ». Par contre une option de suppression pour ceux qui le souhaitent serait une bonne idée.

      Une étape de plus serait que Porte-plume soit Wysiwyg et produise du code balises SPIP auquel ont aurait accès. Donc deux onglets :

      1. Editer Wysiwyg
      2. Editer code SPIP

      Cordialement

      FDG

    • Hihi, François, ce n’est pas sur tes sites que j’aimerais supprimer ces boutons, mais seulement sur certains où cela déroute les rédacteurs :)

      En fait, voici ce qui déroute :
      -  être par défaut en mode « Editer » alors qu’à l’inverse la plupart des éditeurs de ce type montrent par défaut le rendu final (en WYSIWYG certes) fait passer les raccourcis SPIP pour des scories et erreurs de saisies qu’on a alors le réflexe de supprimer. Faudrait-il intervenir les 2 modes ??
      -  l’état « Voir » montre quelque chose qui n’est pas looké comme sur le site final. Difficile de comprendre/expliquer ce que l’on « voit » alors là ni donc à quoi ça sert... Mieux vaudrait une vraie prévisualisation.
      -  il semble manquer un état « HTML »... c’est tellement demandé que... pourquoi pas montrer le HTML généré, bien non éditable, avec un gentil message pédagogique expliquant pourquoi ?

      Je ne sais pas, je réfléchis tout haut.. Mais pour ce que j’ai pu observer, ces boutons causent plus de questions et de frustrations (parce qu’ils sont trop semblables à ce qui se pratique par ailleurs, mais pour proposer autre chose, c’est trompeur) que d’aide. C’était finalement plus simple quand il n’y avait pas ce choix :)

      Un simple display: none; dessus suffirait, mais je ne sais pas comment faire ça proprement. Il faudrait une feuille de style spéciale pour l’espace privée où pouvoir mettre ce genre de surcharges...

    • Bonjour,
      Moi aussi j’avais besoin de désactiver le porte plume.
      J’ai miss ce css dans mon fichier perso.css

      1. .markItUpTabs, .markItUpPreview, .markItUpHeader { display:none; }

      ça semble bien fonctionner.

      Didier

    • Voici une page de documentation sur le porte plume : http://documentation.magraine.net/spip.php?article6

      Pour enlever l’affichage du porte plume, le plus simple et propre et de mettre la classe css ’no_barre’ dans le textarea

      ça marche bien,
      Didier

    • Non didier, avec « perso.css » je crois que tu parles du site public... et pour désactiver le porte plume sur le site public, il faut modifier la « configuration » (dans l’espace privé de SPIP) en cochant notamment : « Ne pas charger les scripts de barre d’outils sur l’espace public » (sans oublier de décocher la barre d’outil dans la config des forums). Il faut bien vider le cache et être patient car ce n’est pas immédiat.

      Je parlais moi de l’espace privé, où je ne souhaite pas désactiver le porte plume, mais seulement l’onglet « voir »...

    Répondre à ce message

  • Bonjour,

    Je viens de télécharger SPIP 2.1.10 et lorsque je me connecte à l’espace privé, n’apparaît qu’une page blanche avec en message « edition.php_icone non autorise ». J’ai fait quelques investigations mais rien ne m’a paru explicitement suspect... je ne connais pas le langage MarkItup donc je ne peux pas trop analyser plus avant.

    Est-ce que quelqu’un a déjà eu ce problème ? Comment le régler ? Ca m’empêche complètement d’accéder à l’espace privé sauf si je supprime l’extension porte plume entière !

    Répondre à ce message

  • Rhoooooo je découvre mon dessin fait sur un tableau d’Avignon. Yes Bienvenue à la V3 !

    Répondre à ce message

  • Commetou

    Bonjour,

    Après passage vers SPIP 2.0.15 et mise à jour de tous les plugins, je n’ai plus la barre de typos. Ni dans l’espace privé, ni dans le public.

    Que faire ? J’ai lu les différents commentaires mais je n’ai rien trouvé qui pourrait résoudre mon problème.

    C’est TRÈS important car la personne en charge de la gestion des textes ne sait pas faire autrement.

    Merci d’avance de votre aide.

    Répondre à ce message

Ajouter un commentaire

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

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