Éditeur de texte riche (WYSIWYG) dans OpenProject

Depuis la version 8.0.0, OpenProject dispose d’un éditeur quasi-WYSIWYG fourni par CKSource CKEditor5. Le format sous-jacent est GitHub Flavored Markdown (GFM). Tous les contenus Textile précédents seront migrés lors de la mise à niveau vers OpenProject 8.0.

Veuillez noter : 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. Dans la vue d’écran fractionné du lot de travaux (vue détaillée), vous devrez peut-être utiliser les trois points verticaux pour accéder à des fonctionnalités supplémentaires de l’éditeur.

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	Comment faire des liens avec des ressources telles que les wikis, projets ou réunions.
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

La version CKEditor5 d’OpenProject prend en charge les styles de texte de base, tels que la mise en forme en gras et en italique, les en-têtes, caractères barrés, le code en ligne, les guillemets ainsi que la gestion des images en ligne. 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. Vous pouvez sélectionner la plupart des widgets en appuyant dessus. La seule exception à cela est le widget de tableau qui comprend un petit bouton de sélection en haut à gauche pour sélectionner le tableau entier.

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

L’extension GFM des spécifications CommonMark ajoute une définition pour la syntaxe des tableaux pris en charge par CKEditor d’OpenProject. 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. ou 1) 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. Notez que les macros ne sont pas développées lors de l’édition de la page, à la place un espace réservé est affiché.

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 :

• une page wiki : [[Wiki page]]
• une page wiki avec un nom de lien séparé : [[Wiki page|The text of the link]]
• une page wiki dans le projet Sandbox : [[Sandbox:Wiki page]]
• un lot de travaux avec ID12 : #12
• un lot de travaux avec ID 12, sujet et type : ##12
• un lot de travaux avec ID 12, sujet, type, statut et dates : ###12
• une version par ID ou nom : version#3, version :"Release 1.0.0"
• un projet par ID/nom : projet#12 , project:"My project name"
• une pièce jointe par nom de fichier : attachment:filename.zip
• une réunion par ID/name : meeting#12 , meeting:"My meeting name"
• un document par ID/nom : document#12, document:"My document name"
• un utilisateur par id ou identifiant : user#4 , user:"johndoe"
• un message du forum par ID : message #1218
• une révision du dépôt 43 : r43
• un commit par hash : commit:f30e13e4
• Vers un fichier source dans le dépôt : 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.

Veuillez noter : 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#4 ne seront pas analysées.

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

Vous pouvez intégrer des attributs spécifiques de lots de travaux ou de projets en utilisant une certaine syntaxe. Exemples :

• Liaison au sujet du lot de travaux avec l’id #1234 : workPackageValue:1234:subject (cela fonctionne aussi pour d’autres attributs. Voir le tableau ci-dessous.)
• Liaison au statut du projet actuel : projectValue:status
• Liaison au sujet du lot de travaux avec le sujet “Début du projet” : workPackageValue:"Projet start":subject

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.

Intégrer des textes d’aide d’attribut

Vous pouvez également intégrer les valeurs des attributs et leurs textes d’aide en utilisant workPackageLabel au lieu de : workPackageLabel:1234:status qui afficherait l’étiquette traduite pour “Status” et (le cas échéant) le texte d’aide correspondant.

Veuillez noter : ces macros ne seront développées que dans le front-end. 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.

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 (sic)
Utilisateur 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

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