Wie füge ich einen Link in der MediaWiki VisualEditor Toolbar hinzu?

Question

Ich versuche, eine benutzerdefinierte Verknüpfung zu einer speziellen Seite in der VisualEditor-Symbolleiste einzufügen. Siehe das Bild unten.

See Image

gegoogelt ich viel, aber ohne Erfolg. Jemand bitte geben Sie einen Pfad ...

Answer 1

Ich bin mir nicht sicher, verstehe ich Ihre Frage vollständig. Es ist so einfach, einen Text auszuwählen, auf das Kettensymbol zu klicken und dann auf den Tab External Link zu klicken und dort Ihren Link einzufügen.

---

Answer 2

Meine Antwort auf den folgenden Ressourcen basieren:

• MediaWiki core JS doc (ooui-js)
• VisualEditor JS doc (+ Code beide für VE verwendet Repositorys lesen, mediawiki/extension/VisualEditor und VisualEditor)

Ich bin mir auch ziemlich sicher, dass es keinen dokumentierten Weg gibt, ein Tool in die Toolbar in VE zu integrieren, soweit ich weiß. Es ist zwar möglich, einer Gruppe, die bereits hinzugefügt wurde, ein Werkzeug hinzuzufügen, das meistens für die Werkzeuggruppe "Einfügen" verwendet wird, wie in Syntaxhighlight_GeSHi. Es ist wahrscheinlich eine viel einfachere oder „bessere“ Art und Weise, dies zu tun :)

Zuerst VisualEditor eine Möglichkeit bietet, zusätzliche Module zu laden, wenn der Hauptteil von VE Lasten (Plugins genannt) (meist, wenn Sie Klicken Sie auf die Schaltfläche "Bearbeiten". Die Module müssen über die globale Variable $wgVisualEditorPluginModules (oder die Entsprechung in extension.json, wenn Sie die neue Erweiterung registrieren) registriert werden. In Ihrer Erweiterungsregistrierungsdatei sollten Sie ein Modul (mit den erforderlichen Skriptdateien zum Hinzufügen des Tools) initialisieren und es als VE-Plugin hinzufügen.

Beispiel PHP (alte Erweiterung Registrierung über PHP-Dateien):

// other setup... 
$wgResourceModules['ext.extName.visualeditor'] = array(
    'localBasePath' => __DIR__, 
    'remoteExtPath' => 'extName' 
    'dependencies' => array(
     'ext.visualEditor.mwcore', 
    ), 
    'scripts' => array(
     'javascripts/ve.ui.ExtNameTool.js', 
    ), 
    'messages' => array(
     'extname-ve-toolname', 
    ), 
); 
$wgVisualEditorPluginModules[] = 'ext.extName.visualeditor'; 
// other setup... 

extension.json (neue JSON-basierte Erweiterung Registrierung):

// other setup... 
"ResourceModules": { 
    "ext.geshi.visualEditor": { 
     "scripts": [ 
      "javascripts/ve.ui.ExtNameTool.js" 
     ], 
     "dependencies": [ 
      "ext.visualEditor.mwcore" 
     ], 
     "messages": [ 
      "extname-ve-toolname" 
     ] 
    } 
}, 
"VisualEditorPluginModules": [ 
    "ext.extName.visualeditor" 
], 
// other setup... 

Wenn nun beginnt VE, es wird geladen Ihr Modul mit dem Namen ext.extName.visualeditor in diesem Beispiel mit dem Skript ve.ui.ExtNameTool.js. In diesem Skript können Sie jetzt tun, was immer Sie wollen. Als Beispiel ist dies ein Weg, ein neues Modul an das Ende der Liste toolgroup in der Werkzeugleiste hinzuzufügen:

Beispiel ve.ui.ExtNameTool.js:

(function() { 
    // create a new class, which will inherit ve.ui.Tool, 
    // which represents one tool 
    ve.ui.extNameTool = function extNameTool(toolGroup, config) { 
     // parent constructor 
     ve.ui.extNameTool.super.apply(this, arguments); 
     // the tool should be enabled by default, enable it 
     this.setDisabled(false); 
    } 
    // inherit ve.ui.Tool 
    OO.inheritClass(ve.ui.extNameTool, ve.ui.Tool); 
    // every tool needs at least a name, or an icon 
    // (with the static property icon) 
    ve.ui.extNameTool.static.name = 'extname'; 
    // don't add the tool to a named group automatically 
    ve.ui.extNameTool.static.autoAddToGroup = false; 
    // prevent this tool to be added to a catch-all group (*), 
    although this tool isn't added to a group 
    ve.ui.extNameTool.static.autoAddToCatchall = false; 
    // the title of the group (it's a message key, 
    // which should be added to the extensions i18n 
    // en.json file to be translateable) 
    // can be a string, too 
    ve.ui.extNameTool.static.title = 
     OO.ui.deferMsg('extname-ve-toolname'); 
    // onSelect is the handler for a click on the tool 
    ve.ui.extNameTool.prototype.onSelect = function() { 
     // show an alert box only, but you can do anything 
     alert('Hello'); 
     this.setActive(false); 
    } 
    // needs to be overwritten, but does nothing so far 
    ve.ui.extNameTool.prototype.onUpdateState = function() { 
    ve.ui.extNameTool.super.prototype.onUpdateState.apply(this, arguments); 
    } 
    // the tool needs to be registered to the toolFactory 
    // of the toolbar to be reachable with the given name 
    ve.ui.toolFactory.register(ve.ui.extNameTool); 
    // add this tool to the toolbar 
    ve.init.mw.Target.static.toolbarGroups.push({ 
     // this will create a new toolgroup with the tools 
     // named in this include directive. The naem is the name given 
     // in the static property of the tool 
     include: [ 'extname' ] 
    }); 
})(); 

Nach der Installation der Erweiterung in Ihr LocalSettings.php und starten VE, sollten Sie ein neues Werkzeug in der Symbolleiste mit dem angegebenen Namen sehen. Wenn Sie darauf klicken, wird eine Alarmbox mit dem Inhalt "Hello" angezeigt. Wie in den Inline-Kommentaren geschrieben: Im Click-Handler (onSelect) können Sie tun, was Sie wollen, z. Öffnen eines Links in einem neuen Tab, z. auf eine spezielle Seite. Um den Link zu einer speziellen Seite zu erhalten, würde ich vorschlagen, mw.Title zu verwenden, um einen lokalisierten Namespace zu erhalten.Zum Beispiel:

var relativeUrl = mw.Title.newFromText('RecentChanges', -1).getUrl(); 

Der erste Parameter von mw.Title.newFromText() der Name der Seite ist, der zweite Parameter die ID des Namespace ist (-1 ist die Standardeinstellung für spezielle Seiten und soll funktioniert immer).

Ich hoffe, dass hilft!