Rich-Text (WYSIWYG) Editor in OpenProject
Ab Version 8.0.0 verfügt OpenProject über einen Quasi-WYSIWYG-Editor, powered by CKSource CKEditor5. Das zugrundeliegende Format ist GitHub-flavored CommonMark (GFM). Alle vorherigen Textile-basierten Inhalte werden beim Upgrade auf OpenProject 8.0 migriert.
Bitte beachten Sie: In einigen Bereichen wie Arbeitspaketen oder Kommentaren enthält der Editor nicht alle Funktionen wie Makros oder Hochladen von Bildern. In der Split-Screen Ansicht des Arbeitspakets (Detailansicht) müssen Sie die drei vertikalen Punkte verwenden, um auf zusätzliche Funktionen des Editors zuzugreifen.
Thema | Inhalt |
---|---|
Grundlegende Formatierung | Grundlegende Formatierungselemente im WYSIWYG-Editor |
Bildverarbeitung | Wie man Bilder in den WYSIWYG-Editor einfügt. |
Tastenkombinationen (Shortcuts) | Arbeiten mit Tastatenkombinationen im WYSIWYG-Editor. |
Makros | Verfügbare Makros im WYSIWYG-Editor |
Links zu OpenProject Ressourcen | Wie man auf Ressourcen wie Wikis, Projekte und Sitzungen verweist. |
Einbetten von Arbeitspaket-Attributen und Projektattributen | Wie man Attribute und Attribut-Hilfetexte einbettet. |
Grundlegende Formatierung
Der Texteditor in OpenProject unterstützt grundlegende Textstile wie fette und kursive Formatierung, Überschriften, Durchstreichen, Inline-Code und Anführungszeichen sowie Inline-Bildbehandlung. Das Einfügen von Inhalten wie Bildern oder Rich-Text wird ebenfalls unterstützt, während nicht unterstütztes Stile vom Editor entfernt wird.
Zeilenumbruch
Anstatt einen neuen Absatz mit Enter zu erstellen, können Sie auch SHIFT+Enter drücken
, um einen Zeilenumbruch zu erstellen, ohne einen neuen Absatz zu erzeugen.
Links
Erstellen Sie Hyperlinks durch Anklicken der Symbolleiste (optional mit ausgewähltem Text), oder durch Drücken von STRG+k
, um ein Pop-up zu öffnen, in dem Sie den Link eingeben können.
Widgets und neue Zeilen
CKEditor verwendet Widgets, um Block-Elemente wie Bilder, Tabellen und andere Elemente anzuzeigen, welche nicht eingebettet sind. Sie können die meisten Widgets auswählen, indem Sie darauf drücken. Die einzige Ausnahme ist das Tabellen-Widget, das oben links einen kleinen Auswahlknopf hat, um die gesamte Tabelle auszuwählen.
Wenn Sie ein Widget ausgewählt haben, können Sie es entfernen oder schneiden. Sie können eine neue Zeile unterhalb (einer existierenden Zeile) erstellen, indem Sie das Widget auswählen und ENTER
oder ↓ (Pfeil nach unten)
drücken, oder eine neue Zeile oberhalb durch Drücken von SHIFT+enter
oder ↑ (Pfeil nach oben)
. Dies ist besonders hilfreich, wenn das Widget das erste oder letzte Element auf der Seite ist und Sie eine Zeile darunter oder darüber einfügen möchten.
Code-Blöcke
Da CKEditor5 derzeit keine Unterstützung für Code-Blöcke bietet, kann OpenProject Code-Blöcke innerhalb der CKEditor Instanz anzeigen, aber nicht bearbeiten. Ein Codeblock kann über ein modales Fenster innerhalb einer CodeMirror
Editor Instanz bearbeitet werden. Dies bietet den Vorteil, Syntaxhervorhebung und Code-Erkennung zur Verfügung zu stellen (für unterstützte Sprachen).
Tabellen
Die GFM-Erweiterung der CommonMark-Spezifikationen fügt eine Definition für Tabellensyntax hinzu, die vom CKEditor von OpenProject unterstützt wird. Diese Definition setzt voraus, dass alle Tabellen eine Überschriftzeile haben. Bei Tabellen, die mit CKEditor ohne Kopfzeilen erstellt wurden, wird stattdessen eine HTML-Tabelle ausgegeben. Dies entspricht dem Verhalten von z.B. GitHub.
Automatische Formatierung
CKEditor5 erlaubt bestimmte CommonMark ähnliche Tastatureingaben automatisch zu formatieren:
- Erstellen Sie fette oder kursive Stile durch Eingabe von
**wird fett**
,_wird kursiv_
, - Erstelle Überschrift mit verschiedenen Einrückungen mit
#
,##
,###
, … - Erstellen Sie eine Aufzählungsliste, indem Sie die Zeile mit
*
oder-
und einem Leerzeichen starten - Erstellen Sie eine nummerierte Liste, indem Sie die Zeile mit
1.
oder1)
und einem Leerzeichen beginnen.
Bildverarbeitung
In unterstützten Ressourcen von OpenProject, in denen Anhänge erlaubt sind, können Sie Bilder zu einer Seite hinzufügen, indem Sie
- den Toolbar-Button benutzen,
- ein Bild aus der Zwischenablage einfügen,
- oder ein Bild via Drag & Drop in den Editor ziehen.
Das Bild wird automatisch hochgeladen und als Anhang gespeichert. Sie können die Bildgröße im Editor per Maus anpassen.
Tastenkombinationen (Shortcuts)
CKEditor verfügt über eine große Auswahl an Tastaturkürzeln, die Sie verwenden können. Eine Liste dokumentierter Shortcuts finden Sie hier: https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html.
Darüber hinaus fügt OpenProject folgende Tastenkombinationen hinzu:
Tastenkombination (Windows/Linux) | Tastenkombination (Mac) | Aktion |
---|---|---|
STRG + ENTER | CMD + ENTER | Änderungen speichern. Für inline-editable Felder, speichern Sie das Feld und schließen Sie es. Für Seiten mit einem vollständigen WYSIWYG (Meetings, Wiki-Seiten), senden Sie das Formular ab. |
Makros
OpenProject hat in der Vergangenheit Makros auf textuell formatierten Seiten unterstützt und tut dies auch weiterhin mit dem WYSIWYG-Editor. Bitte beachten Sie, dass Makros während der Bearbeitung der Seite nicht angezeigt werden, sondern bis zum Speichern von einem Platzhalter vertreten werden.
Sie finden die Makros hier im Texteditor:
Inhaltsverzeichnis
Falls vorhanden, gibt das Inhalts-Makro (TOC) eine Auflistung aller Überschriften auf der aktuellen Seite aus.
Arbeitspaket-Button
Konfigurieren Sie eine Schaltfläche oder einen Link, um den Bildschirm zur Erstellung von Arbeitspaketpaketen im aktuellen Projekt aufzurufen. Sie können vorab einen Arbeitspakettyp bestimmen, der ausgewählt werden soll, sodass es einfach ist, die Benutzer:innen zum Arbeitspaket-Erstellungsformular zu führen.
Wiki-Seite einbeziehen
Fügen Sie den Inhalt einer bestimmten Wiki-Seite in das aktuelle oder ein anderes sichtbares Projekt ein.
Arbeitspaket-Tabelle und Gantt-Diagramm einbetten
Dies ist das flexibelste Makro und bietet umfangreiche Funktionalität im Hinblick auf die Aufnahme dynamischer Arbeitspaket-Tabellen mit allen Möglichkeiten der regulären Arbeitspaket-Tabelle.
Durch Hinzufügen einer eingebetteten Arbeitspaket-Tabelle über die Symbolleiste können Sie die Tabellenansicht in einem Pop-up-Fenster konfigurieren (z. B. Spalten, Gruppierung, Filter und weitere Eigenschaften).
Die dargestellte Seite wird dann die Ergebnisse der Arbeitspaket-Tabelle dynamisch abrufen, wobei die Sichtbarkeit für jede:n Benutzer:in respektiert wird.
Verwenden Sie das Makro, um Ansichten in andere Seiten einzubetten, Berichte aus mehreren Ergebnissen zu erstellen oder um eine Gantt-Diagrammansicht einzubetten.
Links zu OpenProject Ressourcen
Wie bei der Text-Formatierungssyntax können Sie mit den gleichen Verknüpfungen wie bisher auch auf andere Ressourcen in OpenProject verlinken. Erstellen Sie Links zu:
- Wiki Seite:
[[Wiki Seite]]
- Wiki Seite mit separatem Link-Namen:
[[Wiki Seite|Text des Links]]
- Wiki Seiten aus dem Sandbox-Projekt:
[[Sandbox:Wiki Seite]]
- Arbeitspakete mit ID12:
#12
- Arbeitspakete mit der ID 12 mit Thema und Typ:
##12
- Arbeitspaket mit ID 12 mit Thema, Typ, Status und Terminen:
###12
- Version nach ID oder Name:
version#3
,version:"Release1.0.0"
- Projekt nach ID/Name:
project#12
,project:"My project name"
- Anhänge nach Ordnernamen:
Anhang:Ordnername.zip
- Besprechung mit ID/Name:
Besprechung#12
,Besprechung: "Mein Besprechungsname"
- Dokument mit ID/Name:
document#12
,document:"Mein Dokumentname"
- Benutzer:in durch ID oder Login:
user#4
,user:"johndoe"
- eine Forennachricht nach der ID:
Nachricht#1218
- Repository Revision 43:
r43
- Commit by hash:
commit:f30e13e4
- Zu einer Quelldatei im Projektarchiv:
source:"some/file"
Um zu vermeiden, dass diese Elemente verarbeitet werden, beginnen Sie diese mit einem Zeichen !
, wie z.B. !#12
, um die Verknüpfung mit einem Arbeitspaket mit der ID 12 zu verhindern.
Autovervollständigung für Arbeitspakete und Accounts
Bei Arbeitspaketen und Accounts wird durch Eingabe von #
oder @
ein Autovervollständiger für sichtbare Arbeitspakete bzw. Accounts geöffnet.
Einbettung von Arbeitspaket- und Projektattributen
Sie können bestimmte Attribute von Arbeitspaketen oder Projekten mit einer bestimmten Syntax einbetten. Beispiele:
- Verknüpfung mit dem Titel eines Arbeitspakets über die ID #1234:
workPackageValue:1234:subject
(funktioniert auch bei anderen Attributen auch. Siehe Tabelle unten). - Link zum aktuellen Projektstatus:
projectValue:status
- Verknüpfung mit dem Titel des Arbeitspakets mit dem Betreff “Projektstart”:
workPackageValue:"Projektstart":subject
Bitte beachten Sie: Das Verweisen eines Arbeitspakets nach Thema führt nur zur Suche nach Arbeitspaketen mit dem angegebenen Betreff im aktuellen Projekt (falls vorhanden). Wenn Sie Querverweise zu Arbeitspaketen benötigen, verwenden Sie deren ID, um das Arbeitspaket, auf das Sie verweisen möchten, zu ermitteln.
Attribut-Hilfetexte einbetten
Sie können auch Attribute und ihre Hilfetexte einbetten, indem Sie workPackageLabel
anstelle von: workPackageLabel:1234:Status
angeben, was die übersetzte Bezeichnung für “Status” und (falls vorhanden) den entsprechenden Hilfetext dazu ausgeben würde.
Bitte beachten Sie: Diese Makros werden nur im Frontend expandiert. Für jeden einzelnen Account werden die korrekten Berechtigungen geprüft und ob das Makro zu einem Fehler führt, wenn der Account die jeweilige Ressource nicht sehen darf.
Attribute
Die folgenden Listen zeigen die unterstützten Attribute für Arbeitspakete und Projekte an.
Bitte beachten Sie: Wenn Sie eine andere Sprache verwenden als Englisch kann eine Übersetzung der Befehle nur im Texteditor verwendet werden, wenn die gesamte Instanz auf dieselbe Sprache gesetzt wird (zum Beispiel: Deutsch). In diesem Fall wird nur das Attribut übersetzt, auf das sich der Befehl bezieht, z.B. (
workPackageValue:1234:"translated attribute"
). Falls Sie hier unsicher sind, verwenden Sie bitte zur Sicherheit lieber die englischen Attributnamen.
Verfügbare Attribute für Arbeitspakete
Die folgende Liste enthält alle unterstützten Attribute für die Makros workPackageValue
und workPackageLabel
, wobei 1234
für die Arbeitspaket-ID steht.
Attribut | Beispiele für die Verwendung |
---|---|
Selbstdefiniertes Feld | workPackageValue:1234:"Name des selbstdefinierten Feldes für Arbeitspakete" |
Zugewiesen an | workPackageValue:1234:"Zugewiesen an" |
Autor | workPackageValue:1234:"Autor" |
Kategorie | workPackageValue:1234:"Kategorie" |
Erstellungsdatum | workPackageValue:1234:"Erstellt" |
Beschreibung | workPackageValue:1234:"Beschreibung" |
Geschätzter Aufwand | workPackageValue:1234:"Geschätzter Aufwand" |
Endtermin | workPackageValue:1234:"Endtermin" |
Übergeordnetes Arbeitspaket | workPackageValue:1234:"Übergeordnetes Arbeitspaket" |
Priorität | workPackageValue:1234:"Priorität" |
Projekt | workPackageValue:1234:"Projekt" |
Verbleibende Stunden | workPackageValue:1234:"Verbleibende Stunden" |
Verantwortlich | workPackageValue:1234:"Verantwortlich" |
Aufgewendete Zeit | workPackageValue:1234:"Aufgewendete Zeit" |
Anfangstermin | workPackageValue:1234:"Anfangstermin" |
Status | workPackageValue:1234:"Status" |
Thema (Titel) | workPackageValue:1234:"Thema" |
Arbeitspaket-Typ | workPackageValue:1234:"Typ" |
Aktualisiert am | workPackageValue:1234:"Aktualisiert am" |
Version | workPackageValue:1234:"Version" |
Verfügbare Attribute für Projekte
Die folgende Liste enthält alle unterstützten Attribute für projectValue
und projectLabel
Makros. Die Beispiele zeigen alle Referenzen auf das aktuelle Projekt, in dem das Dokument gerendert wird. Sie können auch ein anderes Projekt mit projectValue:"Identifier des Projekts":attribute
referenzieren.
Attribut | Beispiele für die Verwendung |
---|---|
Selbstdefiniertes Feld | projectValue:"Name des selbstdefinierten Feldes für Projekte" |
Ist das Projekt aktiv? (Boolean) | projectValue:aktiv |
Beschreibung | projectValue:Beschreibung |
Identifikator des Projekts | projectValue:Identifikator |
Name des Projektes | projectValue:Name |
Status | projectValue:Status |
Statusbeschreibung | projectValue:Statusbeschreibung |
Übergeordnetes Projekt | projectValue:übergeordnetesProjekt |
Projekt öffentlich? (Boolean) | projectValue:öffentlich |