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.
• 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 acds-text="">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. Die Vorschau kann über das Auge-Symbol ein- und ausgeblendet werden. 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.
Vorschau ein-/ausblenden (Auge-Symbol)	Blendet die Live-Vorschau rechts neben dem Editor ein oder aus.

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