Wikipedia:Technik/Text/Edit/CodeEditor
Vorlage:Überschriftensimulation 1
Die MediaWiki-Erweiterung CodeEditor (basierend auf Ace) dient dazu, bei der Bearbeitung Seiten besser darzustellen, die vollständig in einer formalen Sprache notiert sind („Content Model“). Insbesondere geht es um Syntaxhervorhebung, auch um die Anzeige von Zeilennummern.
Zurzeit ist Quellcode in JavaScript, CSS und Lua von Interesse.
Geeignete Browser
Der CodeEditor wurde nur für einige Versionen der folgenden Browser erprobt:
- Firefox
- Google Chromium
Ansonsten funktioniert er nicht oder zerstört den Seiteninhalt. Die Fehlfunktion ist den Entwicklern durchaus bekannt – modules/ext.codeEditor.js – ohne dass daraus irgendeine Konsequenz gezogen wurde.
- Opera 11.10 / Linux: copy fails, paste sometimes crashes
- IE 8.0.6001.18702 / Win XP: some newlines mysteriously removed, corrupting data; insertion point keeps resetting back to the top of the page after a click (arrow keys ok)
- Safari / iPad 4.3 (8F190): renders ok, but can't set focus or scroll vertically. No focus means no typing. :(
Aktivierung
Wichtig: Konkurrierende Editoren müssen deaktiviert sein, namentlich WikEd.
Automatisch
Seit 29. August 2013 wird der CodeEditor automatisch beim Bearbeiten jeder Seite zugeschaltet, deren Content Model nicht wikitext ist, sondern die Variable wgPageContentModel einen der folgenden Werte hat:
| wgPageContentModel | Automatische Zuweisung nach Regeln |
|---|---|
css
|
|
javascript
| |
Scribunto
|
Scribunto steht zurzeit nur für Lua (könnten auch weitere Sprachen sein).
|
Die Aktivierung berücksichtigt nicht, ob der momentane Browser überhaupt für den CodeEditor geeignet ist (obwohl dies mit Leichtigkeit festzustellen wäre).
Eine einfache Konfiguration, um die automatische Aktivierung des CodeEditor zu unterbinden, gibt es nicht. Zu einer Lösung siehe unten.
Individuell
Die Programmierung wird in die benutzerdefinierte JavaScript-Seiten eingefügt; meist common.js (siehe Skin/JS).
- CSS und JavaScript
- Die automatische Zuweisung berücksichtigt nur den Benutzer-Namensraum.
- Es gibt auch Quellcode-Seiten im Wikipedia-Namensraum.
- Lua
- Benutzernamensraum, also Nummer 2 (wgNamespaceNumber).
- Seitenname enthält
/Spielwiese/Modul:(wgTitle).
- Zu den Variablen siehe hier.
Ist die Situation festgestellt worden, dass eine Quellcode-Seite bearbeitet wird, ist das entsprechende Schlüsselwort zuzuweisen; hier lua als Beispiel. Danach werden die erforderlichen Module eingebunden (ResourceLoader).
mw.config.set("wgCodeEditorCurrentLanguage", "lua");
mw.loader.load( [ "ext.codeEditor",
"ext.codeEditor.ace",
"jquery.ui.resizable",
"jquery.wikiEditor" ] );
Verfügbare Sprachen
Standardmäßig werden zurzeit Syntaxdefinitionen passend zu den folgenden Schlüsselwörtern zugeladen:
javascriptjsoncsslua
Es lassen sich weitere Typen aktivieren, für die in einer Wikipedia bislang keine Seiten bekannt sind:
c_cppclojurecsharpcoffeegroovyhtmljavaocamlperlphppythonrubyscala
Dazu ist auch die Ressource ext.codeEditor.ace.modes zu laden.
Eine weitere Anwendungsmöglichkeit wäre Wikitext; hierzu gibt es Experimente (AceWikiEditor), aber noch keine tragfähige Abbildung der vieldeutigen Wikisyntax.
Bedienung
- Es wird die „neue“ Werkzeugleiste benutzt (Hilfe:Symbolleisten).
- Mit der vorangestellten Schaltfläche
lässt sich die Hervorhebung ein- und ausschalten. - Veränderungen an relevanten Syntaxelementen (etwa Kommentar) verändern sofort die umgebende Syntaxhervorhebung.
- Markierung einer öffnenden oder schließenden Klammer markiert den umschlossenen Bereich.
- Cursorposition hinter öffnender oder schließender Klammer hebt die zugehörige Klammer hervor.
Probleme
- Die Warnung vor Datenverlust beim Verlassen der Seite / Schließen des Fensters ohne Speicherung erfolgt nicht.
Cookie
Die Extension setzt den Cookie wikiEditor-0-codeEditor-enabled – wird diesem der Wert 0 zugewiesen, ist die Grundeinstellung „geladen, aber keine Hervorhebung“.
Ein Klick auf die Schaltfläche 
aktiviert (1) bzw. deaktiviert die Hervorhebung und ändert den Wert des Cookies.
Tools
- Ein Benutzerskript, das den CodeEditor automatisch auf allen dafür geeigneten Seiten startet und sonst nicht, ist Benutzer:PerfektesChaos/js/editorContent.
- Eine alternative Methodik verwendet Benutzer:Schnark/js/syntaxhighlight.
Code: CodeEditor deaktivieren
Der nachstehende Code wartet darauf, dass der CodeEditor gestartet wurde, und entfernt ihn anschließend wieder.
mw.hook( "codeEditor.configure" ).add( function () {
"use strict";
var context = mw.util.$content.find( "#wpTextbox1" )
.data( "wikiEditor-context" );
if ( context && context.codeEditor && context.api && context.fn ) {
context.fn.disableCodeEditor();
context.api.removeFromToolbar( context,
{ "section": "main",
"group": "format",
"tools": "codeEditor" } );
jQuery.cookie( "wikiEditor-0-codeEditor-enabled", null );
}
} );
Code: CodeEditor nur bei geeignetem Browser
Der nachstehende Code setzt das Beispiel aus dem vorangehenden Abschnitt ein: Wenn es sich nicht um Wikitext handelt, wird der Browser überprüft, und bei fehlender Eignung des aktuellen Browsers der CodeEditor deaktiviert.
if ( mw.config.get( "wgPageContentModel" ) !== "wikitext" ) {
mw.loader.using( [ "jquery.client" ],
function () {
"use strict";
var profile = jQuery.client.profile();
if ( "chrome firefox".indexOf( profile.name ) < 0 ) {
mw.hook( "codeEditor.configure" ).add( function () {
var context = mw.util.$content.find( "#wpTextbox1" )
.data( "wikiEditor-context" );
if ( context &&
context.codeEditor && context.api && context.fn) {
context.fn.disableCodeEditor();
context.api.removeFromToolbar( context,
{ "section": "main",
"group": "format",
"tools": "codeEditor"
} );
jQuery.cookie( "wikiEditor-0-codeEditor-enabled", null );
}
} );
}
}
);
}
Implementierung
Siehe auch
- meta:CodeEditor/de – deutschsprachige Kurzbeschreibung im Meta-Projekt
- WP:AceWikiEditor – experimentell, für Wikitext