Éditeur de texte riche (WYSIWYG) dans OpenProject
OpenProject features a quasi-WYSIWYG editor, powered by CKSource CKEditor5. The underlying format is GitHub-flavored CommonMark (GFM) with additional HTML for e.g. mentions and image sizing.
Remarque
Dans certaines ressources telles que les lots de travaux ou les commentaires, l’éditeur n’expose pas toutes les fonctionnalités telles que les macros ou le téléchargement d’image. In the work package split screen view (details view), you may have to use the three vertical dots to access additional features of the editor.
| Sujet | Contenu |
|---|---|
| Mise en forme de base | Éléments de mise en forme de base dans l’éditeur WYSIWYG |
| Gestion des images | Comment ajouter des images dans l’éditeur WYSIWYG. |
| Raccourcis clavier | Travailler avec des raccourcis clavier dans l’éditeur WYSIWYG. |
| Macros | Macros disponibles dans l’éditeur WYSIWYG |
| Liens vers les ressources OpenProject | How to link to resources like wikis, projects and meetings. |
| Intégration des attributs du lot de travaux et des attributs du projet | Comment intégrer des attributs et attribuer des textes d’aide. |
Mise en forme de base
The CKEditor5 build in OpenProject supports basic text styles, such as bold and italic formatting, headings, strike-through, inline code, and quotes, as well as inline image handling. Le collage de contenu comme des images ou du texte riche est également pris en charge, tandis que les styles non pris en charge seront supprimés par l’éditeur.
Sauts de ligne
Au lieu de créer un nouveau paragraphe avec Entrée, vous pouvez appuyer sur MAJ + Entrée pour créer un saut de ligne sans créer de nouveau paragraphe.
Liens
Créez des hyperliens en appuyant sur la barre d’outils (éventuellement avec du texte sélectionné) ou en appuyant sur CTRL + K pour ouvrir une fenêtre contextuelle pour y saisir le lien.
Widgets et sauts de lignes
CKEditor utilise des widgets pour afficher des éléments de bloc tels que les images, les tableaux et d’autres éléments qui ne sont pas affichés en ligne. You can select most widgets by pressing on them - The only exception to that is the table widget, it has a little select knob at the top left to select the entire table.
Lorsque vous avez sélectionné un widget, vous pouvez le supprimer ou le couper. Vous pouvez créer une nouvelle ligne ci-dessous en sélectionnant le widget et en appuyant sur ENTRÉE ou ↓ (FLÈCHE VERS LE BAS), ou une nouvelle ligne au-dessus de celle-ci en appuyant sur MAJ + Entrée ou ↑ (FLÈCHE VERS LE HAUT). Ceci est particulièrement nécessaire lorsque le widget est le premier ou le dernier élément de la page pour insérer une ligne au-dessous ou en dessus.
Blocs de code
Comme CKEditor5 ne fournit pas actuellement de prise en charge pour les blocs de code, OpenProject peut s’afficher, mais pas éditer les blocs de code dans l’instance de CKEditor. Un bloc de code peut être édité via une fenêtre modale dans une instance de l’éditeur CodeMirror. Ceci a l’avantage de fournir la coloration syntaxique et la détection de code (pour les langages pris en charge).
Tableaux
The GFM extension of the CommonMark specs adds a definition for table syntax, which the CKEditor of OpenProject supports. Cette définition requiert que tous les tableaux aient une ligne d’en-tête. Pour les tableaux créés avec CKEditor sans ligne d’en-tête, un tableau HTML est affiché. Cela correspond au comportement de GitHub.
Mise en forme automatique
CKEditor5 permet certaines combinaisons de touches de clavier de mise en forme automatique similaires à CommonMark :
- Créez des styles en gras ou en italique en saisissant
**will become bold**,_will become italic_, - Créer un titre d’indentation différente avec
#,##,###, etc. - Créez une liste à puces en démarrant la ligne par
*ou-et un espace - Créer une liste numérotée en commençant la ligne par
1.ou1)et un espace
Gestion des images
Dans les ressources prises en charge par OpenProject où les pièces jointes sont autorisées, vous pouvez ajouter des images à la page
- en utilisant le bouton de la barre d’outils,
- collant une image depuis votre presse-papiers,
- ou en glissant-déposant une image dans l’éditeur.
L’image sera automatiquement téléchargée et stockée comme pièce jointe. Vous pouvez ajuster la taille de l’image dans l’éditeur à l’aide de votre souris.
Raccourcis clavier
CKEditor dispose d’une grande variété de raccourcis clavier que vous pouvez utiliser. Vous trouverez une liste de raccourcis documentés ici : https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html.
En plus de cela, OpenProject ajoute le raccourci suivant :
| Raccourci (Windows / Linux) | Raccourci (Mac) | Action |
|---|---|---|
| CTRL + ENTER | CMD + ENTER | Enregistrer les modifications. Pour les champs modifiables en ligne, enregistrer le champ et le fermer. Pour les pages avec un WYSIWYG complet (réunions, pages wiki), soumettre le formulaire. |
Macros
OpenProject prend en charge les macros sur les pages formatées en Textile et continue de le faire avec l’éditeur WYSIWYG. Note that macros are not expanded while editing the page, instead, a placeholder is shown.
Vous pouvez trouver les macros ici dans l’éditeur de texte : 
Table des matières
Le cas échéant, la macro de table des matières (TOC) affichera une liste de tous les en-têtes de la page actuelle.
Bouton du lot de travaux
Configurez un bouton ou un lien pour cibler l’écran de création de lots de travaux dans le projet actuel. Vous pouvez présélectionner le type de lot de travaux qui doit être sélectionné. Cela facilite l’orientation des utilisateurs vers le formulaire de création de lots de travaux.
Inclure la page wiki
Ajoutez le contenu d’une page wiki donnée dans le projet actuel ou dans un autre projet visible.
Tableau des lots de travaux et graphique de Gantt intégrés
Il s’agit de la macro la plus flexible qui fournit des fonctionnalités étendues concernant l’inclusion de tableaux dynamiques de lots de travaux avec tout le potentiel du tableau normal.
En ajoutant un tableau intégré de lots de travaux à travers la barre d’outils, vous pouvez configurer la vue du tableau (comme les colonnes, le regroupement, les filtres et autres propriétés) dans une fenêtre contextuelle.
La page rendue récupérera ensuite les résultats du tableau des lots de travaux de façon dynamique, en respectant la visibilité de chaque utilisateur.
Utilisez-le pour intégrer des vues dans d’autres pages, créer des rapports de résultats multiples ou intégrer une vue en diagramme de Gantt.
Liens vers les ressources OpenProject
Comme avec la syntaxe de formatage Textile, vous pouvez faire le lien avec d’autres ressources dans OpenProject en utilisant les mêmes raccourcis que précédemment. Créez des liens vers :
| Link target | Exemple d’utilisation |
|---|---|
| Page wiki | [[Wiki page]] |
| Wiki page with separate link name | [[Wiki page\|The text of the link]] |
| Wiki page in the Sandbox project | [[Sandbox:Wiki page]] |
| Work package with ID12 | #12 |
| Work package with ID 12 with subject and type | ##12 |
| Work package with ID 12 with subject, type, status, and dates | ###12 |
| Version by ID or name | version#3, version:"Release 1.0.0" |
| Project by ID/name | project#12 , project:"My project name" |
| Attachment by filename | attachment:filename.zip |
| Meeting by ID/name | meeting#12 , meeting:"My meeting name" |
| Document by ID/name | document#12 , document:"My document name" |
| User by ID or login | user#4 , user:"johndoe" |
| Forum message by ID | message#1218 |
| Repository revision 43 | r43 |
| Commit par hash | commit:f30e13e4 |
| Source file in the repository | source:"some/file" |
Pour éviter de traiter ces objets, précédez-les d’un caractère bang ! tel que !#12, qui empêchera les liens vers le lot de travaux avec l’ID 12.
Remarque
Toutes ces macros doivent être écrites comme un nouveau mot (c’est-à-dire avec au moins un espace avant) ou au début d’un paragraphe ou d’une phrase. Les macros contenues dans un mot tel que
quelquechose#4ne seront pas analysées.
Conseil
Pour plus d’informations sur l’utilisation des macros, consultez cet article de blog.
Saisie semi-automatique pour les lots de travaux et les utilisateurs
Pour les lots de travaux et les utilisateurs, saisissez # ou @ pour ouvrir un outil de saisie semi-automatique pour les lots de travaux visibles et les utilisateurs, respectivement.
Intégration des attributs du lot de travaux et des attributs du projet
Remarque
Ces macros ne seront développées que dans le frontend. Pour chaque utilisateur individuel, les bonnes permissions seront vérifiées et la macro se traduira par une erreur si l’utilisateur n’est pas autorisé à voir la ressource respective.
Embedding of a work package value by work package ID
Use the workPackageValue:ID:attribute macros to embed attributes of a work package by its work package ID. See the table below for available attributes.
Par exemple :
Linking to the subject of work package with ID #1234: workPackageValue:1234:subject
Embedding of a work package value by work package subject
Use the workPackageValue:"Project name":attribute macros to embed attributes of a work package by its subject. See the table below for available attributes.
Par exemple :
Linking to the assignee of work package with subject “Project start”: workPackageValue:"Project start":assignee
Remarque
La référence d’un lot de travaux par sujet ne permet de rechercher que les lots de travaux avec ce sujet dans le projet actuel (le cas échéant). Si vous avez besoin de référencer des lots de travaux, utilisez leurs ID pour les identifier. We recommend against using subjects as references, as they are not updated when the referenced subject changes.
Relative embedding of a work package value
Use the workPackageValue:attribute macros to embed attributes of the current work package.
If you are editing a work package description or a rich text custom field belonging to a work package you can omit the ID if you want to reference it. You must include the work package ID if you are editing e.g. a wiki page or a meeting description. See the table below for available attributes.
Par exemple :
Linking to the assigned person of the current work package: workPackageValue:assignee
Embedding of a project value by project ID
Use the projectValue:ID:attribute macros to embed attributes of a project by its project ID. See the table below for available attributes.
Par exemple :
Linking to the project’s status with the ID 1234: projectValue:1234:status
Relative embedding of a project value
Use the projectValue:attribute macros to embed attributes of the current project. See the table below for available attributes.
Par exemple :
Liaison au statut du projet actuel : projectValue:status
Intégrer des textes d’aide d’attribut
You can also embed attribute values and their help texts by using workPackageLabel or projectLabel. For exampleworkPackageLabel:1234:status would output the translated label for “Status” and (if exists), the corresponding help text for it.
Attributs
Les listes suivantes montrent les attributs pris en charge pour les lots de travaux et les projets.
Remarque
Si vous utilisez une langue autre que l’anglais, une traduction des commandes ne peut être utilisée dans l’éditeur de texte que si la langue de tous les utilisateurs d’une instance est la même (par exemple, l’allemand). Dans ce cas, seul l’attribut auquel la commande fait référence est traduit, par exemple (
workPackageValue:1234:"attribut traduit"). Nous vous déconseillons d’utiliser des attributs traduits, car ils risquent de ne pas fonctionner dans les versions futures en raison de corrections ou de modifications apportées aux textes.
Attributs disponibles pour les lots de travaux
La liste suivante contient tous les noms d’attributs pris en charge pour les macros workPackageValue et workPackageLabel, où 1234 désigne l’ID du lot de travaux.
| Attribut | Exemple d’utilisation |
|---|---|
| Champs d’utilisateur | workPackageValue:1234:"Nom du champ personnalisé du lot de travaux" |
| Assigné à | workPackageValue:1234:assignee |
| Auteur | workPackageValue:1234:author |
| Catégorie | workPackageValue:1234:category |
| Date de création | workPackageValue:1234:createdAt |
| Description | workPackageValue:1234:description |
| Durée estimée | workPackageValue:1234:estimatedTime |
| Date de fin | workPackageValue:1234:dueDate |
| Lot de travaux parent | workPackageValue:1234:parent |
| Priorité | workPackageValue:1234:priority |
| Projet | workPackageValue:1234:project |
| Heures restantes | workPackageValue:1234:remainingTime |
| Responsable | workPackageValue:1234:responsible |
| Temps passé | workPackageValue:1234:spentTime |
| Date de début | workPackageValue:1234:startDate |
| Statut | workPackageValue:1234:status |
| Sujet/titre | workPackageValue:1234:subject |
| Type de lot de travaux | workPackageValue:1234:type |
| Date de la dernière mise à jour | workPackageValue:1234:updatedAt |
| Version | workPackageValue:1234:version |
Remarque
Recursive embedding of rich text is not supported. For example, you cannot embed a work package description in itself with
workPackageValue:description.
Attributs disponibles pour les projets
La liste suivante contient tous les noms d’attributs pris en charge pour les macros projectValue et projectLabel. Les exemples montrent tous des références au projet actuel dans lequel le document est rendu. Ils peuvent également référencer un autre projet avec projectValue:"Identifiant du projet":attribute.
| Attribut | Exemple d’utilisation |
|---|---|
| Champs d’utilisateur | projectValue:"Nom du champ personnalisé du projet" |
| Projet actif ? (booléen) | projectValue:active |
| Description | projectValue:description |
| Identifiant du projet | projectValue:identifier |
| Nom du projet | projectValue:name |
| Statut | projectValue:status |
| Description du statut | projectValue:statusExplanation |
| Projet parent | projectValue:parent |
| Projet public ? (booléen) | projectValue:public |
