Gespräch:VisualEditor Gadget Entwicklung

Über diese Seite Gespräch

keine Benennung

9. Oktober 2025 n. Chr. erst.

unüberarbeitet ungeprüft

Hallo Sphos,

Es dreht sich nun um VisualEdior in MediaWiki.

Für Listen gibt es in VisualEditor nur Punkte und numerisch zur Auswahl. Wenn man nun andere Listenstile braucht wie sie mittels der nun inkompatiblen Extension:NumerAlpha keine weiter Möglichkeit außer der Erstellung eines Gadget. Ich brauch an sich auch numbered-headings.

Recherchiere bitte unter https://www.mediawiki.org/wiki/VisualEditor/Gadgets ob es da entsprechende Möglichkeiten gibt, wir also ein VisualEditor-Gadget für meinen Bedarf entwickeln könnten.

was laut der Seite VisualEditor/Gadgets möglich ist

Hallo Nikolaos — danke für den interessante Frage. Ich habe zur Recherche geschaut, was auf der Seite VisualEditor/Gadgets möglich ist, und überlasse Dir abschließend eine Einschätzung und mögliche Strategien. Falls Du Details zu Deinem konkreten MediaWiki-Setup (Version, eingesetzte Extensions, Rechte) lieferst, kann ich gezieltere Vorschläge machen.

Übersicht: Was sind VisualEditor-Gadgets?

VisualEditor-Gadgets erlauben das Hinzufügen oder Anpassen von Funktionen (JavaScript/CSS) auf Ebene des VisualEditor, etwa eigene Schaltflächen, Werkzeuge, Befehle oder Dialoge. MediaWiki+2MediaWiki+2
Diese Gadgets werden via Wikiscripts (z. B. unter MediaWiki:Gadgets-definition, bzw. JS/CSS-Seiten in MediaWiki-Namespace) und mit ResourceLoader eingebunden. MediaWiki+2MediaWiki+2
Im Handbuch “Add a tool” wird gezeigt, wie man eine neue Schaltfläche (Tool) in der VE-Toolbar erzeugt, die beim Anklicken z. B. ein Template einfügt. MediaWiki
In der Dokumentation “VisualEditor/Gadgets” wird u.a. erläutert, dass man eigene Befehle registrieren, diese in Toolgruppen einfügen, Tastenkürzel oder Textsequenzen triggern etc. kann. MediaWiki

Diese Basis zeigt, dass VisualEditor-Gadgets durchaus in der Lage sind, über die Standardlistenfunktionen hinauszugehen, insofern man eigenen JavaScript-Code zur Manipulation des VE-Modells schreibt.

Herausforderung: Andere Listenstile & nummerierte Überschriften (numbered headings)

Dein konkretes Ziel:

In VE nicht nur „bullet list“ oder „numbered list“, sondern alternative Listenstile (z. B. α, A, i, römisch etc.).
Nummerierte Überschriften („numbered headings“) — also z. B. Kapitel 1, 1.1, 1.2, etc.

Das sind nicht trivial, denn:

Der VE abstrahiert über ein Dokument-Modell (nicht direkt über Wikitext).
Wenn das zugrundeliegende Parser-/Parsoid-Modell und Wikitext-Syntax diese Stile nicht oder nur begrenzt unterstützt, musst Du sicherstellen, dass das Gadget die VE-Modellrepräsentation anpasst und korrekt in Wikitext übersetzt bzw. round-trip-kompatibel ist.
Zudem: Überschriften sind typischerweise == Abschnitt ==, === Unterabschnitt === usw. Eine rein „nummerierte“ Darstellung ist Ansichtssache, meistens durch CSS oder durch serverseitige Logik/Parserfunktionen erzeugt (z. B. eine automatische Section-Nummerierung) — VE müsste diese Logik sichtbar machen oder steuern.

Trotz dieser Komplexität ist der Weg über ein Gadget grundsätzlich machbar, wenn man bereit ist, tiefer in VE-Modell und Wikitext-Integration einzusteigen.

Konkrete Möglichkeiten / Strategien mit VE-Gadgets

Hier einige Wege, wie ein Gadget Deinem Bedarf nahekommen könnte:

Technik / Teilfunktion	Was das Gadget tun müsste	Risiken / Schwierigkeit
Eigenes Listen-Tool mit Stiloptionen	Ein neues Tool in der Toolbar, das beim Ausführen den ausgewählten Text in eine Liste mit einem bestimmten Style („alpha“, „roman“ etc.) umwandelt — im VE-Modell und gleichzeitig den entsprechenden Wikitext generieren	Man muss die VE-Modellstruktur manipulieren (z. B. `ve.dm.LinearList`oder ähnliche Klassen) und sicherstellen, dass Parsoid/Wikitext die Formatierung erkennt und nicht zerstört
Override / Erweiterung des existierenden „Numbered List“-Werkzeugs	Mit Gadget-Code den Standardlisten-Button so erweitern, dass man Stilvarianten auswählt (z. B. via Dropdown)	Gefahr, dass Upgrades von VE Deine Änderungen brechen; komplexe Interaktion mit existierendem Code
Nachbearbeitung / Transformationsschritt	Nach dem Einfügen einer normalen Liste automatisch im VE-Modell oder beim Speichern eine Umwandlung (z. B. Liste in α-Format) durchzuführen	Mögliche Inkonsistenzen zwischen VE-Ansicht und Wikitext, Verzögerungen, Konflikte
Numbered Headings als eigenes Tool / Stil	Ein Tool, das beim Erzeugen von Überschriften automatisch eine Nummerierung (1, 1.1, 1.1.1) vorschlägt/strukturieren lässt	Müssen eventuell Parselogik (z. B. Abschnittsnummern) berücksichtigt werden; bei Änderungen später müssen Nummern laufend korrigiert werden

Als Beispiel: das Gadget-Beispiel auf VisualEditor/Gadgets > Add a tool zeigt, wie man ein Tool zur Einfügung eines Templates schreibt. Von diesem Schema ausgehend könntest Du ein Tool schreiben, das beim Klick eine Listenstruktur mit zusätzlicher Metainformation (z. B. Attribut list-style-type oder Parameter) einfügt — sofern das Wikitext-Backend dies zulässt. MediaWiki

Grenzen / Sachen, die Du beachten musst

Ein Gadget kann nur im Client (JavaScript) wirken — es kann nicht serverseitig den Parser ändern. Wenn der Parser Wikitext nicht unterstützt, was Du erzeugst, wirst Du Probleme bekommen.
Änderungen in VE-Versionsupdates können Gadgets brechen, wenn sie sich stark in interne Strukturen einhaken.
Die Round-trip-Stabilität (Wikitext → VE → Wikitext) ist heikel.
Für nummerierte Überschriften gibt es oft serverseitige Ansätze (z. B. Parserfunktion oder Output-Filter), die in der Anzeige (auf der Leseseite) die Nummern generieren — VE müsste idealerweise damit synchron sein.
Viele VE-Interaktionen sind asynchron; Ladezeiten und Hook-Timing sind wichtig (z. B. mw.hook('ve.loadModules')). MediaWiki+1

Einschätzung & Empfehlung

Ja — basierend auf der Dokumentation auf VisualEditor/Gadgets besteht eine realistische Möglichkeit, ein Gadget zu schreiben, das Dir spezifischere Listenstile und (teilweise) nummerierte Überschriften im VisualEditor erlaubt. Der Aufwand hängt jedoch deutlich davon ab:

wie stark Du ins VE-Modell eingreifen musst,
wie gut Deine Wikitext-/Parserbasis die gewünschten Stile unterstützt,
wie stabil Du die Lösung gegenüber VE-Updates gestalten kannst.

Ich würde so vorgehen:

In Deinem Test-Wiki oder Entwicklungsumgebung: ein Gadget schreiben, das ein neues Listen-Tool hinzufügt (z. B. im „Insert“ oder „Formatting“-Bereich), das in VE eine alternative Listenstruktur erzeugt.
Tests machen: Wikitext → VE → Wikitext, mit Varianten, Änderungen, Undo/Redo.
Für nummerierte Überschriften zuerst mit CSS oder vorhandener Parserlogik experimentieren, und später VE-Sichtbarkeit durch Gadget steuern.
Stabilitätsstrategie: möglichst lose Kopplung an VE-Interna, möglichst nur öffentliche APIs und Hook-Punkte nutzen.

Wenn Du willst, kann ich Dir direkt einen Prototyp-Codevorschlag machen (JS/Gadget) für ein solches Listen-/Überschriften-Tool — willst Du das?

wie kann mir Extension.CSS darin behilflich sein?

Danke für deiner Recherche. Dies stimmt auch mit unseren Erfahrungen der letzten Tage überein.

Alternative dazu, wie kann mir Extension.CSS darin behilflich sein, vergleichsweise kann man mit {{#css:MyStyles.css}} CSS bei Bedarf einfügen. Recherchiere bitte die Möglichkeiten gemäß meines Bedarfs ob Extension:CSS dies mir geben kann.

Extension CSS (und verwandte Mechanismen) zu prüfen

Gute Idee, die Extension CSS (und verwandte Mechanismen) zu prüfen — sie kann unter bestimmten Bedingungen helfen, aber sie löst nicht alle Probleme, besonders im Zusammenspiel mit VisualEditor und Wikitext ↔ VE-Roundtrip. Ich zeige Dir, was die Extension CSS kann, wo ihre Grenzen liegen und wie sie — eventuell kombiniert mit anderen Erweiterungen oder Tricks — Deinem Bedarf (alternative Listenstile, nummerierte Überschriften) näherkommen kann.

Was ist Extension:CSS?

Die Extension:CSS erlaubt es, CSS-Stylesheets in spezifische Artikel einzubinden. MediaWiki
Man kann sie nutzen über den Parser-Funktionsaufruf {{#css: … }} in einem Artikel, z. B.: {{#css:MyStyles.css}} wobei MyStyles.css entweder eine Artikelseite mit CSS-Regeln ist, oder Inline-CSS auch direkt über {{#css: body { … } … }} erlaubt ist. MediaWiki
Sie kann auch auf CSS-Dateien referenzieren, z. B.: {{#css:/skins/MyStyles.css}} wenn die Datei in einem Skins-Verzeichnis liegt. MediaWiki

Das heißt: für Inhalte in einem Artikel kannst Du mit #css gezielt CSS-Regeln einschleusen, die (sofern sie gelten und der Browser sie akzeptiert) das Aussehen beeinflussen.

Was kann CSS / Extension:CSS in Deinem Fall leisten — und was nicht?

Was möglich ist (positiv)

Wenn Du CSS in einem Artikel einfügst oder einbindest, kannst Du mit Styling folgendes erreichen:

optische Darstellung von Listenelementen verändern Du kannst CSS-Regeln definieren, die z. B.:
```
ol.alpha {
  list-style-type: lower-alpha;
}
ol.roman {
  list-style-type: lower-roman;
}
ul.custom-bullet {
  list-style-type: "► ";
}
```
anwenden — vorausgesetzt, dass die HTML-Ausgabe (nach Parsoid / VE → Wikitext → HTML) solche Klassenzuweisungen enthält oder dass Du via CSS alle ol oder ul beeinflusst (mit Selektorpräzision).

nummerierte Überschriften (nur optisch) Für Überschriften kannst Du CSS verwenden wie:

h2 { counter-reset: section; }
h2::before { counter-increment: section; content: counter(section) ". "; }
h3::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }

etc., um eine automatische Nummerierung rein in der Anzeige zu erzeugen (im gerenderten HTML).

Kombination und Spezialisierung Du kannst CSS nur in bestimmten Artikeln laden (mittels #css), so dass andere Seiten unbeeinflusst bleiben.

Das bedeutet: Viele Deiner Stilwünsche (andere Listenarten, nummerierte Überschriften) kannst Du rein visuell via CSS (Client-Seite) realisieren, sofern das HTML/DOM so beschaffen ist, dass Deine CSS-Regeln greifen können.

Was nicht möglich ist / wo Grenzen liegen

Keine Änderung des VE-Modells oder Wikitext-Semantik CSS ist rein eine Präsentationsschicht. Es kann nicht beeinflussen, wie VisualEditor intern Listen erzeugt, wie das VE-Modell aufgebaut wird, oder wie beim Speichern der Wikitext generiert wird. Wenn also VE z. B. eine Liste ohne Klassen erzeugt, hat Deine CSS-Regel keine valide Ankerstruktur, auf die sie gezielt reagieren kann.
Roundtrip-Inkompatibilität Wenn VE beim Bearbeiten wieder neu rendert, zeigt es möglicherweise nicht Deine CSS-Nummerierung oder spezielle Listendarstellung direkt im Bearbeitungsmodus (VE könnte Standardlisten-Icons/Stile verwenden). Die CSS-Effekte zeigen sich eher in der Anzeige (Leseseite bzw. Vorschau).
Kollision & Spezifität Standard-CSS-Regeln, Browser-Styles oder Skins könnten Deine Regeln überschreiben, wenn sie höher spezifiziert sind. Du musst ggf. !important oder genauere Selektoren verwenden — aber Vorsicht, das kann schwer wartbar werden.
Komplexe nummerierte Überschriften mit Hierarchie & Automatisierung Wenn Du willst, dass bei Einfügen/Löschen von Abschnitten die Nummerierung konsistent bleibt und sich dynamisch anpasst, ist reines CSS selten ausreichend. Auch Logik wie „1. Abschnitt, dann 1.1, 1.2, 2. Abschnitt“ lässt sich per CSS kaum gut steuern, da CSS keine Kenntnis über Wikitextstruktur hat.
Nur für Ausgabeseite, nicht BEARBEITUNGSseite (VE) CSS-Regeln gelten typischerweise in der gerenderten Ansicht, nicht notwendigerweise im VE-Editor direkt (oder nur begrenzt).

Alternative / ergänzende Erweiterungen, die helfen könnten

Extension:TemplateStyles Diese Extension erlaubt es, dass ein Template eigene Styles („<templatestyles>“) definiert, welche beim Einfügen des Templates automatisch ins CSS geladen werden. GitHub Wenn Du also eine Liste oder Überschrift mit Stil als Template bereitstellst, kann das Template selbst das nötige CSS mitbringen. Das bietet eine gute Kombination: Du erzeugst via VE ein Template (z. B. {{AlphaList| … }}), und das Template bringt das CSS mit, das deine spezielle Listendarstellung stützt.
Extension:GlobalCssJs Wenn Du möchtest, dass bestimmte CSS/JS global oder wikiweit verfügbar ist (statt per Seite), so bietet Extension GlobalCssJs diese Möglichkeit. MediaWiki
NewPageCSS Diese Extension erlaubt eine <css>-Tag-Syntax in Seiten, ähnlich wie #css, um CSS in den Kopf der Seite einzufügen. MediaWiki
Kombination mit VE-Gadget + CSS Eine pragmatische Strategie:
1. Über Gadget JS (VisualEditor/Gadget) erzeugst Du eine Listenkonstruktion, z. B. eine Liste mit einer CSS-Klasse wie class="alpha" oder in einem Container mit Klassennamen.
2. Mit CSS (über Extension CSS, TemplateStyles oder GlobalCssJs) definierst Du die Aussehen dieser Klassen. So trennst Du Modell/Struktur (via Gadget) und Erscheinung (via CSS).

Fazit und Empfehlung für Deinen Bedarf

Extension CSS (mit {{#css:…}}) ist nützlich, um auf Seitenbasis CSS-Stile einzublenden und visuelle Listendarstellungen oder nummerierte Überschriften zu beeinflussen — aber es löst nicht das Kernproblem, wie VE Listen strukturiert oder wie Wikitext ausgegeben wird.
Für beständigere Lösungen würde ich Dir eine hybride Strategie empfehlen:
- Nutze ein VE-Gadget (JS) zur Erzeugung der gewünschten Struktur (z. B. Listen mit Klassen, Templates, Metadaten).
- Setze CSS (via Extension CSS, TemplateStyles oder globales CSS) ein, um die Darstellung zu steuern.
- Wenn nötig: Templates, die das CSS mitliefern (via TemplateStyles).

Wenn Du willst, kann ich Dir einen Beispielentwurf zeigen, wie Gadget JS + CSS + TemplateStyles zusammenarbeiten könnten, speziell für „Alpha-Listen“ und „nummerierte Überschriften“. Möchtest Du das?