如何在MediaWiki VisualEditor工具栏中添加链接？

Question

我正在尝试将自定义链接插入VisualEditor工具栏中的特殊页面。见下图。

See Image

我google了很多但没有成功。有人请给出一条路径......

Answer 1

我的回答基于以下资源：

• MediaWiki core JS doc (ooui-js)
• VisualEditor JS doc（+用于VE，mediawiki/extension/VisualEditor和VisualEditor的两个存储库的读取代码）

另外，我很确定，据我所知，没有记录的方法可以将工具添加到VE的工具栏中。虽然可以将工具添加到已添加的组中，但主要用于＆＃34;插入＆＃34;工具组，如Syntaxhighlight_GeSHi）。可能有一个更容易或更好的＆＃34;这样做的方式：）

首先，当VE的主要部分加载时（大多数情况下，当您单击＆＃34;编辑＆＃34;按钮时），VisualEditor提供了一种加载其他模块（称为插件）的方法。模块需要通过全局变量$wgVisualEditorPluginModules（或extension.json中的等效项，如果您使用新的扩展注册）进行注册。在扩展注册文件中，您应该初始化模块（使用所需的脚本文件添加工具）并将其添加为VE插件。

示例PHP（通过PHP文件进行旧的扩展注册）：

// 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（基于JSON的新扩展注册）：

// 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...

现在，如果VE启动，它将使用脚本ext.extName.visualeditor加载您的模块，在此示例中名为ve.ui.ExtNameTool.js。在这个脚本中，您现在可以做任何您想要的事情。例如，这是一种将新模块添加到工具栏中工具组列表末尾的方法：

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' ]
    } );
} )();

在LocalSettings.php中安装扩展程序并启动VE后，您应该会在工具栏中看到一个具有给定名称的新工具。单击它将显示一个包含内容＆＃34; Hello＆＃34;的警告框。与内联注释中所写的一样：在点击处理程序（onSelect）中，您可以执行任何操作，例如：在新标签页中打开一个链接，例如到特殊页面。要获取指向特殊页面的链接，我建议使用mw.Title来获取本地化的命名空间。例如：

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

mw.Title.newFromText()的第一个参数是页面的名称，第二个参数是命名空间的ID（-1是特殊页面的默认值，应始终有效）。

我希望有所帮助！

Answer 2

我不确定我完全理解你的问题。只需选择一些文字，点击链图标，然后点击External Link标签并将链接粘贴在那里即可。