agorum.markdownEditor

Dieses Widget stellt einen Markdown-Editor mit Live-Vorschau dar. Es ermöglicht das Bearbeiten und Anzeigen von Markdown-Dateien (.md) direkt in agorum core.

• Im Bearbeitungsmodus (mode: edit) wird links ein Code-Editor (agorum.codeEditor mit Sprache markdown) und rechts eine Live-Vorschau angezeigt. Code-Ansicht und Vorschau lassen sich unabhängig voneinander ein- und ausklappen, passen sich automatisch an schmale Fenster an und die zuletzt gewählte Ansicht wird pro Benutzer gespeichert.
• Im Ansichtsmodus (mode: view) wird nur die gerenderte Vorschau angezeigt, mit optionalen Schaltflächen zum Umschalten auf den Quellcode und zum Öffnen des Editors.
• Das Widget unterstützt: 
  • agorum core-spezifische Links im Format object:<uuid> und
  • agorum core-spezifische Bilder im Format https://agorumdocproxy.agorum.com/api/rest/object/embed/<uuid>
• Im Bearbeitungsmodus wird ein Dirty-Tracking durchgeführt. Beim Schließen mit ungespeicherten Änderungen erscheint ein Bestätigungsdialog.
• Das Tastaturkürzel Strg+S speichert die Datei im Bearbeitungsmodus.

Für weitere Informationen zum Editor siehe undefined>Markdown-Editor.

Verwendung

let aguila = require('common/aguila');

// Create markdown editor in edit mode
let mdEditor = aguila.create({
  type: 'agorum.markdownEditor',
  mode: 'edit',
  id: '<uuid-of-markdown-file>'
});

mdEditor;

Events

---

idChanged

Wird ausgelöst, wenn sich die ID der geladenen Markdown-Datei ändert.

mdEditor.on('idChanged', id => {
  console.log('New file ID:', id);
});

saved

Wird ausgelöst, nachdem die Datei erfolgreich gespeichert wurde.

mdEditor.on('saved', () => {
  console.log('File saved successfully');
});

dirtyChanged

Wird ausgelöst, wenn sich der Dirty-Status ändert (d. h. ob ungespeicherte Änderungen vorliegen).

mdEditor.on('dirtyChanged', dirty => {
  console.log('Has unsaved changes:', dirty);
});

Parameter

---

id (String)

Die ID (UUID, numerische ID oder Pfad) der Markdown-Datei, die angezeigt bzw. bearbeitet werden soll. Kann bei der Erstellung oder nachträglich gesetzt werden.

// Set via creation
let mdEditor = aguila.create({
  type: 'agorum.markdownEditor',
  id: '744a2e90-1705-11f1-b061-02420a0a0012'
});

// Set afterwards
mdEditor.id = '744a2e90-1705-11f1-b061-02420a0a0012';

mode (String)

Definiert den Modus des Widgets.

Wert	Beschreibung
view (Standard)	Zeigt die gerenderte Markdown-Vorschau an. Über Schaltflächen in der Toolbar kann zwischen Vorschau und Quellcode umgeschaltet werden. Ein Edit-Button öffnet den Editor als Popup (sofern Schreibrechte vorhanden).
edit	Zeigt den Code-Editor links und die Live-Vorschau rechts an. Code-Ansicht (Code-Symbol) und Vorschau (Auge-Symbol) können unabhängig voneinander ein- und ausgeblendet werden. Bei schmalen Fenstern wird automatisch auf eine einzelne Ansicht umgeschaltet; wird das Fenster wieder breiter, erscheinen automatisch beide Ansichten. Die zuletzt manuell gewählte Ansicht sowie die Breite der Vorschau werden pro Benutzer gespeichert und beim nächsten Öffnen wiederhergestellt. Ein Save-Button und Strg+S ermöglichen das Speichern.

hideToolbar (Boolean)

Wert	Beschreibung
true	Blendet die Toolbar (mit Save-, Edit- und Toggle-Buttons) aus.
false (Standard)	Zeigt die Toolbar an.

dirty (Boolean)

Gibt an, ob ungespeicherte Änderungen vorliegen. Dieser Parameter ist nur lesbar und wird vom Widget automatisch verwaltet. Er kann über das Event dirtyChanged überwacht werden.

Wert	Beschreibung
true	Es liegen ungespeicherte Änderungen vor.
false	Keine ungespeicherten Änderungen.

readOnly (Boolean)

Wert	Beschreibung
true	Versetzt den Markdown-Editor in einen reinen Lesemodus.
false (Standard)	Der Markdown-Editor ist editierbar.

value (String)

Der aktuelle Markdown-Inhalt des Editors als Zeichenkette. Wird automatisch gesetzt, wenn eine Datei über den Parameter id geladen wird.

// Read the current markdown content
let content = mdEditor.value;

Funktionen

---

save()

Speichert den aktuellen Inhalt des Editors in die Markdown-Datei. Funktioniert nur im Bearbeitungsmodus (mode: 'edit'). Nach erfolgreichem Speichern wird das Event saved ausgelöst und der Dirty-Status zurückgesetzt.

// Save the current content
mdEditor.save();

Toolbar-Funktionen

---

Bearbeitungsmodus (mode: edit)

Schaltfläche	Beschreibung
Speichern	Speichert den aktuellen Inhalt. Ist nur aktiv, wenn ungespeicherte Änderungen vorliegen.
Code-Ansicht (Code-Symbol)	Steuert die Sichtbarkeit des Code-Editors. Sind beide Ansichten sichtbar, wird die Code-Ansicht ausgeblendet (nur Vorschau bleibt). Ist nur die Vorschau sichtbar, werden wieder beide Ansichten eingeblendet. Ist nur die Code-Ansicht sichtbar, wird auf die reine Vorschau umgeschaltet.
Vorschau (Auge-Symbol)	Steuert die Sichtbarkeit der Live-Vorschau. Sind beide Ansichten sichtbar, wird die Vorschau ausgeblendet (nur Code-Ansicht bleibt). Ist nur die Code-Ansicht sichtbar, werden wieder beide Ansichten eingeblendet. Ist nur die Vorschau sichtbar, wird auf die reine Code-Ansicht umgeschaltet.

Der Markdown-Editor kennt im Bearbeitungsmodus drei Ansichtszustände:

• Beide Ansichten (Standard): Code-Editor links, Live-Vorschau rechts. Die Trennlinie zwischen beiden kann verschoben werden, um die Breite der Vorschau anzupassen.
• Nur Code-Ansicht: Es wird ausschließlich der Code-Editor angezeigt.
• Nur Vorschau: Es wird ausschließlich die gerenderte Vorschau angezeigt.

Die Symbole und Tooltips der beiden Schaltflächen passen sich dem aktuellen Zustand an.

Ansichtsmodus (mode: view)

Schaltfläche	Beschreibung
Code/Vorschau umschalten	Wechselt zwischen der gerenderten Vorschau und dem Markdown-Quellcode (nur Lesemodus).
Bearbeiten (Stift-Symbol)	Öffnet den Markdown-Editor als Popup im Bearbeitungsmodus. Nur sichtbar, wenn der Benutzer Schreibrechte auf die Datei hat.

Tastaturkürzel

---

Tastaturkürzel	Beschreibung	Modus
Strg+S	Speichert die aktuelle Datei.	edit

Beispiele

---

Markdown-Editor im Bearbeitungsmodus

let aguila = require('common/aguila');

// Create markdown editor in edit mode
let mdEditor = aguila.create({
  type: 'agorum.markdownEditor',
  mode: 'edit',
  id: '<uuid-of-markdown-file>'
});

// Listen for save events
mdEditor.on('saved', () => {
  console.log('File saved');
});

// Listen for dirty state changes
mdEditor.on('dirtyChanged', dirty => {
  console.log('Unsaved changes:', dirty);
});

// Return the widget to the user
mdEditor;

Markdown-Viewer im Ansichtsmodus

let aguila = require('common/aguila');

// Create markdown viewer in view mode
let mdViewer = aguila.create({
  type: 'agorum.markdownEditor',
  mode: 'view',
  id: '<uuid-of-markdown-file>'
});

// Return the widget to the user
mdViewer;

Markdown-Editor ohne Toolbar

let aguila = require('common/aguila');

// Create markdown editor without toolbar
let mdEditor = aguila.create({
  type: 'agorum.markdownEditor',
  mode: 'edit',
  hideToolbar: true,
  id: '<uuid-of-markdown-file>'
});

// Save programmatically via external trigger (e.g. a button click)
// mdEditor.save();

// Return the widget to the user
mdEditor;

Markdown-Editor mit Datei laden

let aguila = require('common/aguila');
let objects = require('common/objects');

// Find a markdown file by path
let mdFile = objects.find('/agorum/roi/customers/my-project/doc/readme.md');

// Create markdown editor and load the file
let mdEditor = aguila.create({
  type: 'agorum.markdownEditor',
  mode: 'edit',
  id: mdFile.UUID
});

// Return the widget to the user