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

问题描述

我正在尝试在VisualEditor工具栏中插入指向特殊页面的自定义链接.请参见下图.

I`m trying to insert a custom link to a special page in VisualEditor toolbar. See the image below.

查看图片

我用Google搜索了很多，但没有成功.有人给个路...

I googled a lot but without success. Someone please give a path...

推荐答案

我的答案基于以下资源:

My answer is based on the following resources:

• MediaWiki核心JS文档(ooui-js)
• VisualEditor JS文档(+读取用于VE的两个存储库的代码， mediawiki/extension/VisualEditor 和 VisualEditor )

• MediaWiki core JS doc (ooui-js)
• VisualEditor JS doc (+ reading code of both repositories used for VE, mediawiki/extension/VisualEditor and VisualEditor)

我也很确定，据我所知，还没有文件记载的向VE中的工具栏添加工具的方法.尽管可以将工具添加到已添加的组中，但通常用于插入"工具组，例如语法highlight_GeSHi ).可能有一种更简单或更好"的方法:)

Also, I'm pretty sure, that there is no documented way of adding a tool to the toolbar in VE, as far as I know. Although it's possible to add a tool to a group, which is already added, mostly used for the "Insert" tool group, like in Syntaxhighlight_GeSHi). There is, probably, a much easier or "better" way of doing this :)

首先，VisualEditor提供了一种在VE的主要部分加载时(通常是在单击编辑"按钮时)来加载其他模块(称为 plugins )的方法.需要通过全局变量$wgVisualEditorPluginModules(或如果使用新的扩展名注册，在extension.json中的等效项)注册模块.在扩展名注册文件中，您应该初始化一个模块(使用添加该工具所需的脚本文件)，并将其添加为VE插件.

First, VisualEditor provides a way to load additional modules (called plugins) when the main part of VE loads (mostly, when you click the "Edit" button). The modules needs to be registered via the global variable $wgVisualEditorPluginModules (or the equivalent in extension.json, if you're using the new extension registration). In your extension registration file, you should initialize a module (with your required script files to add the tool) and add it as a VE plugin.

PHP示例(通过PHP文件注册旧扩展名):

Example PHP (old extension registration via PHP files):

// 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的扩展注册):

extension.json (new JSON-based extension registration):

// 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启动，它将使用脚本ve.ui.ExtNameTool.js加载您的模块(在本示例中为ext.extName.visualeditor).在此脚本中，您现在可以执行所需的任何操作.例如，这是一种将新模块添加到工具栏中的工具组列表末尾的方法:

Now, if VE starts, it will load your module, named ext.extName.visualeditor in this example, with the script ve.ui.ExtNameTool.js. In this script, you can now do, what ever you want. As an example, this is a way to add a new module to the end of the toolgroup list in the toolbar:

ve.ui.ExtNameTool.js的示例:

Example of 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之后，您应该在工具栏中看到具有给定名称的新工具.单击它会显示一个带有内容"Hello"的警报框.就像在行内注释中写的那样:在点击处理程序(onSelect)中，您可以执行所需的任何操作，例如在新标签页中打开链接，例如进入特殊页面.为了获得指向特殊页面的链接，我建议使用mw.Title来获取本地化的名称空间.例如:

After installing the extension in your LocalSettings.php and starting VE, you should see a new tool in the toolbar with the given name. Clicking it will show an alert box with content "Hello". Like written in the inline comments: In the click handler (onSelect) you can do whatever you want, e.g. open a link in a new tab, e.g. to a Special page. To get the link to a special page I would suggest to use mw.Title to get a localized namespace. For example:

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

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

The first parameter of mw.Title.newFromText() is the name of the page, the second parameter is the ID of the namespace (-1 is the default for special pages and should always work).

希望对您有帮助！

这篇关于如何在MediaWiki VisualEditor工具栏中添加链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！