最佳答案
我的回答基于以下资源:
- MediaWiki core JS doc (ooui-js)
- VisualEditor JS doc (+读取用于 VE 的两个存储库的代码, mediawiki/extension/VisualEditor 和 VisualEditor )
另外,据我所知,我非常确定,没有记录的方法可以将工具添加到 VE 中的工具栏。尽管可以将工具添加到已添加的组中,但主要用于“插入”工具组,如 Syntaxhighlight_GeSHi 中所示。 )。可能有一种更简单或“更好”的方法来做到这一点:)
首先,VisualEditor 提供了一种在 VE 加载主要部分时(主要是当您单击“编辑”按钮时)加载附加模块(称为插件)的方法。这些模块需要通过全局变量 $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 启动,它将使用脚本 ve.ui.ExtNameTool.js
加载本例中名为 ext.extName.visualeditor
的模块。在此脚本中,您现在可以做任何您想做的事情。例如,这是一种将新模块添加到工具栏中工具组列表末尾的方法:
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 来获取本地化的命名空间。例如:
var relativeUrl = mw.Title.newFromText( 'RecentChanges', -1 ).getUrl();
mw.Title.newFromText()的第一个参数是页面名称,第二个参数是命名空间的ID(-1是特殊页面的默认值,应该始终有效)。
希望对您有所帮助!
关于mediawiki - 如何在 MediaWiki VisualEditor 工具栏中添加链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30272435/