Éditeur de texte riche (WYSIWYG) dans OpenProject

OpenProject dispose d’un éditeur quasi-WYSIWYG fourni par CKSource CKEditor5. Le format sous-jacent est GitHub-flavored CommonMark (GFM) avec du HTML supplémentaire pour, par exemple, les mentions et la taille de l’image.

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. 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 :

Cible du lien	Exemple d’utilisation
Page wiki	[[Wiki page]]
Page wiki avec nom de lien distinct	[[Wiki page\|The text of the link]]
Page du wiki dans le projet Sandbox	[[Sandbox:Wiki page]]
Lot de travaux avec ID12	#12
Lot de travaux avec ID 12 avec objet et type	##12
Lot de travaux avec ID 12 avec sujet, type, statut et dates	###12
Version par ID ou par nom	version#3, version:"Release 1.0.0"
Projet par ID/nom	project#12 , project:"My project name"
Pièce jointe par nom de fichier	attachment:filename.zip
Réunion par ID/nom	meeting#12 , meeting:"My meeting name"
Document par ID/nom	document#12 , document:"My document name"
Utilisateur par ID ou identifiants	user#4 , user:"johndoe"
Message de forum par ID	message#1218
Révision 43 du dépôt	r43
Commit par hash	commit:f30e13e4
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.

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#4 ne 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.

Intégration de la valeur d’un lot de travaux par l’ID du lot de travaux

Utilisez les macros workPackageValue:ID:attribute pour intégrer les attributs d’un lot de travaux par son ID de lot de travaux. Voir le tableau ci-dessous pour les attributs disponibles.

Par exemple :

Liaison au sujet du lot de travaux avec l’ID n°1234 : workPackageValue:1234:subject

Intégration de la valeur d’un lot de travaux par le sujet du lot de travaux

Utilisez les macros workPackageValue :"Project name":attribute pour intégrer les attributs d’un lots de travaux par son sujet. Voir le tableau ci-dessous pour les attributs disponibles.

Par exemple :

Liaison au responsable du lot de travaux avec le sujet “Début du projet” : 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. Nous vous déconseillons d’utiliser des sujets comme références, car ils ne sont pas mis à jour lorsque le sujet référencé change.

Intégration relative de la valeur d’un lot de travaux

Utilisez les macros workPackageValue:attribute pour intégrer les attributs du lot de travaux en cours.

Si vous modifiez la description d’un lot de travaux ou un champ personnalisé en texte riche appartenant à un lot de travaux, vous pouvez omettre l’identifiant si vous souhaitez y faire référence. Vous devez inclure l’identifiant du lot de travaux si vous modifiez par exemple une page wiki ou une description de réunion. Voir le tableau ci-dessous pour les attributs disponibles.

Par exemple :

Lien à la personne assignée au lot de travaux actuel : workPackageValue:assignee

Intégration d’une valeur de projet par ID de projet

Utilisez les macros projectValue:ID:attribute pour intégrer les attributs d’un projet par son ID. Voir le tableau ci-dessous pour les attributs disponibles.

Par exemple :

Liaison au statut du projet avec l’ID 1234: projectValue:1234:status

Intégration relative de la valeur d’un projet

Utilisez les macros projectValue:attribute pour intégrer les attributs du projet en cours. Voir le tableau ci-dessous pour les attributs disponibles.

Par exemple :

Liaison au statut du projet actuel : projectValue:status

Intégrer des textes d’aide d’attribut

Vous pouvez également intégrer des valeurs d’attributs et [leurs textes d’aide] (../../system-admin-guide/attribute-help-texts/) en utilisant workPackageLabel ou projectLabel. Par exemple, workPackageLabel:1234:status affichera l’étiquette traduite pour “Status” et (si elle existe), le texte d’aide correspondant.

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

L’incorporation récursive de texte riche n’est pas prise en charge. Par exemple, vous ne pouvez pas incorporer la description d’un lot de travaux en elle-même avec 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