Description
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 est installé par défaut avec les versions 3 de SPIP :
Barre d’outil Porte-plume
Solution technique retenue
Cette barre d’outils est dorénavant complétée par des fonctions supplémentaires (enluminures typographiques) et d’autres spécifiques s’ajouteront lors de la montée de version de Spip.
Possibilité de visualisation
Deux onglets dans la partie privée permettent de passer de l’espace de saisie au rendu généré.
- Aperçu du résultat de la saisie
Facilités de saisie
Le porte plume regorge de petites fonctionnalités très discrètes mais qui améliorent grandement la saisie :
Certains boutons ont 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. Vous disposez de 3 niveaux d’intertitres,
- Si vous commencez une liste à puces ou numérotée 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,
- Vous pouvez mettre en évidence du texte. Deux couleurs sont disponibles.
- Un ligne de séparation au dessus du texte en ajoutant une ligne constituée de quatre tirets (signe -)
----, - Créer un tableau simplement avec le bouton Tableau,
- Shift+entrée effectue un saut simple et non un saut de paragraphe (à éviter d’utiliser !!)
Nb : Certaines fonctionnalités ne fonctionnent pas avec le navigateur Opéra.
L’insertion de photos
L’insertion de photos est très simple à prendre en main.
Il faut tout d’abord téléverser une image ou un document :
puis, faire un double-clic sur le lien fourni sous la photo téléversée.
Apparaît alors dans votre article le code <img123|left> ou <doc123|center>.
Le left, right ou center permet de positionner le document dans le texte.
En utilisant left ou right, le texte suivant va s’adapter à la position du document comme ici.
Si vous ne voulez pas que le texte "entoure" le document, il est possible d’enlever l’indicateur de position |left |right et donc de n’indiquer que <img123> (l’image sera alignée à gauche) ou d’utiliser <img123|center> (l’image sera centrée). Le texte se placera alors au dessus et au dessous de l’image.
Redimensionner une photo dans un article
Le portfolio va disparaître avec Spip 4 !
Pour dimensionner une photo dans un article, il suffit de remplacer le code <img123|center> par <doc123|center> par exemple.
Ensuite, si l’image est vraiment trop grande, il est possible de l’afficher avec une dimension différente comme ceci :
-
<doc123|center|largeur=50>donnera une image de 50 pixels de large :
- Aperçu du résultat de la saisie
-
<doc123|center|hauteur=70>donnera une image de 70 pixels de haut :
- Aperçu du résultat de la saisie
Le signe
|s’obtient avec les touches [AltGr] + [6].
Ajouter un tableau
Pour ajouter un tableau dans un article, il faut utiliser l’icône
de la barre d’outils (vous devez être sur une ligne vierge).
S’ouvre alors ceci :
Vous pouvez compléter le titre et le résumé du tableau (optionnels), ajouter ou supprimer des colonnes ou des lignes...
Vous obtenez ceci dans votre fenêtre d’éditeur :
||Mon premier tableau|Ceci est mon 1er tableau||
|{{Colonne 1}}|{{Colonne 2}}|{{Colonne 3}}|{{Colonne 4}}|
|1|Texte 1.1|Texte 1.2|Texte 1.3|
|2|Texte 2.1|Texte 2.2|Texte 2.3|
|3|Texte 3.1|Texte 3.2|Texte 3.3|Il ressemblera à ceci une fois en ligne :
| Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 |
|---|---|---|---|
| 1 | Texte 1.1 | Texte 1.2 | Texte 1.3 |
| 2 | Texte 2.1 | Texte 2.2 | Texte 2.3 |
| 3 | Texte 3.1 | Texte 3.2 | Texte 3.3 |
Modifier un tableau
Pour modifier un tableau, vous pouvez :
- le sélectionner dans son intégralité comme ceci :
et cliquer sur le bouton pour lancer l’éditeur graphique. - éditer directement dans le code en respectant la syntaxe et le nombre de colonnes (séparées par un
|).