我在我的Wiki上运行了MediaWiki VisualEditor扩展，它运行良好。但是，我想自定义主VE工具栏以添加不同字体样式的列表，例如：
1.新 - ＆gt;将文本包装在<span class='new'>text here</span>中
2.旧 - ＆gt;将文本包装在<span class='old'>text here</span>
有关于如何实现这个目标的例子吗？
the link question下的答案可能正朝着正确的方向发展，但我无法让它在我的环境中工作 - 链接不会被添加到我的VE工具栏中。也许我错过了一步，但即便如此，它只会添加一个链接，而不是在我的文本周围换一个样式。所以请帮忙！
答案 0 :(得分：2)
所以我经过大量的反复试验，看到了很多不同的帖子后，终于解决了这个问题。但我不相信这不是黑客;事实上，我正在编辑现有的类 - 添加我自己的注释 - 而不是创建一个干净的扩展。
这是我修改过的VisualEditor版本： VisualEditor：REL1_25 2015-09-17T18：15：26 be84313
以下是我修改的差异：
diff -r VisualEditor/extension.json /var/www/html/wiki/extensions/VisualEditor/extension.json
535a536,537
> "lib/ve/src/dm/annotations/ve.dm.StrongAnnotation.js",
> "lib/ve/src/dm/annotations/ve.dm.InsAnnotation.js",
602a605,606
> "lib/ve/src/ce/annotations/ve.ce.StrongAnnotation.js",
> "lib/ve/src/ce/annotations/ve.ce.InsAnnotation.js",
755a760,762
> "visualeditor-annotationbutton-strong-tooltip",
> "visualeditor-annotationbutton-ins-tooltip",
> "visualeditor-annotationbutton-highlight-tooltip",
diff -r VisualEditor/lib/ve/i18n/en.json /var/www/html/wiki/extensions/VisualEditor/lib/ve/i18n/en.json
30c30
< "visualeditor-annotationbutton-strikethrough-tooltip": "Strikethrough",
---
> "visualeditor-annotationbutton-strikethrough-tooltip": "Deleted",
33a34,36
> "visualeditor-annotationbutton-strong-tooltip": "Hot",
> "visualeditor-annotationbutton-ins-tooltip": "New edit",
> "visualeditor-annotationbutton-highlight-tooltip": "Marked outdated",
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/lib/oojs-ui/themes/apex/images/icons: new.svg
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/lib/oojs-ui/themes/mediawiki/images/icons: new.svg
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ce/annotations: ve.ce.InsAnnotation.js
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ce/annotations: ve.ce.StrongAnnotation.js
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/dm/annotations: ve.dm.InsAnnotation.js
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/dm/annotations: ve.dm.StrongAnnotation.js
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: hot.svg
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: new.svg
Only in /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/images/icons: old.svg
diff -r VisualEditor/lib/ve/src/ui/styles/ve.ui.Icons.css /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/styles/ve.ui.Icons.css
198a199,210
> .oo-ui-icon-strong {
> /* @embed */
> background-image: url(images/icons/hot.svg); }
>
> .oo-ui-icon-new {
> /* @embed */
> background-image: url(images/icons/new.svg); }
>
> .oo-ui-icon-highlight {
> /* @embed */
> background-image: url(images/icons/old.svg); }
>
diff -r VisualEditor/lib/ve/src/ui/tools/ve.ui.AnnotationTool.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/tools/ve.ui.AnnotationTool.js
180a181,246
> * UserInterface strong tool.
> *
> * @class
> * @extends ve.ui.AnnotationTool
> * @constructor
> * @param {OO.ui.ToolGroup} toolGroup
> * @param {Object} [config] Configuration options
> */
> ve.ui.StrongAnnotationTool = function VeUiStrongAnnotationTool( toolGroup, config ) {
> ve.ui.AnnotationTool.call( this, toolGroup, config );
> };
> OO.inheritClass( ve.ui.StrongAnnotationTool, ve.ui.AnnotationTool );
> ve.ui.StrongAnnotationTool.static.name = 'strong';
> ve.ui.StrongAnnotationTool.static.group = 'textStyle';
> ve.ui.StrongAnnotationTool.static.icon = 'strong';
> ve.ui.StrongAnnotationTool.static.title =
> OO.ui.deferMsg( 'visualeditor-annotationbutton-strong-tooltip' );
> ve.ui.StrongAnnotationTool.static.annotation = { name: 'textStyle/strong' };
> ve.ui.StrongAnnotationTool.static.commandName = 'strong';
> ve.ui.toolFactory.register( ve.ui.StrongAnnotationTool );
>
> /**
> * UserInterface ins tool.
> *
> * @class
> * @extends ve.ui.AnnotationTool
> * @constructor
> * @param {OO.ui.ToolGroup} toolGroup
> * @param {Object} [config] Configuration options
> */
> ve.ui.InsAnnotationTool = function VeUiInsAnnotationTool( toolGroup, config ) {
> ve.ui.AnnotationTool.call( this, toolGroup, config );
> };
> OO.inheritClass( ve.ui.InsAnnotationTool, ve.ui.AnnotationTool );
> ve.ui.InsAnnotationTool.static.name = 'ins';
> ve.ui.InsAnnotationTool.static.group = 'textStyle';
> ve.ui.InsAnnotationTool.static.icon = 'new';
> ve.ui.InsAnnotationTool.static.title =
> OO.ui.deferMsg( 'visualeditor-annotationbutton-ins-tooltip' );
> ve.ui.InsAnnotationTool.static.annotation = { name: 'textStyle/ins' };
> ve.ui.InsAnnotationTool.static.commandName = 'ins';
> ve.ui.toolFactory.register( ve.ui.InsAnnotationTool );
>
> /**
> * UserInterface highlight tool.
> *
> * @class
> * @extends ve.ui.AnnotationTool
> * @constructor
> * @param {OO.ui.ToolGroup} toolGroup
> * @param {Object} [config] Configuration options
> */
> ve.ui.HighlightAnnotationTool = function VeUiHighlightAnnotationTool( toolGroup, config ) {
> ve.ui.AnnotationTool.call( this, toolGroup, config );
> };
> OO.inheritClass( ve.ui.HighlightAnnotationTool, ve.ui.AnnotationTool );
> ve.ui.HighlightAnnotationTool.static.name = 'highlight';
> ve.ui.HighlightAnnotationTool.static.group = 'textStyle';
> ve.ui.HighlightAnnotationTool.static.icon = 'highlight';
> ve.ui.HighlightAnnotationTool.static.title =
> OO.ui.deferMsg( 'visualeditor-annotationbutton-highlight-tooltip' );
> ve.ui.HighlightAnnotationTool.static.annotation = { name: 'textStyle/highlight' };
> ve.ui.HighlightAnnotationTool.static.commandName = 'highlight';
> ve.ui.toolFactory.register( ve.ui.HighlightAnnotationTool );
>
> /**
diff -r VisualEditor/lib/ve/src/ui/ve.ui.CommandRegistry.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/ve.ui.CommandRegistry.js
164a165,182
> 'strong', 'annotation', 'toggle',
> { args: ['textStyle/strong'], supportedSelections: ['linear', 'table'] }
> )
> );
> ve.ui.commandRegistry.register(
> new ve.ui.Command(
> 'ins', 'annotation', 'toggle',
> { args: ['textStyle/ins'], supportedSelections: ['linear', 'table'] }
> )
> );
> ve.ui.commandRegistry.register(
> new ve.ui.Command(
> 'highlight', 'annotation', 'toggle',
> { args: ['textStyle/highlight'], supportedSelections: ['linear', 'table'] }
> )
> );
> ve.ui.commandRegistry.register(
> new ve.ui.Command(
diff -r VisualEditor/lib/ve/src/ui/ve.ui.TriggerRegistry.js /var/www/html/wiki/extensions/VisualEditor/lib/ve/src/ui/ve.ui.TriggerRegistry.js
109,110c109,110
< new ve.ui.Trigger( 'cmd+\\' ),
< new ve.ui.Trigger( 'cmd+m' )
---
> new ve.ui.Trigger( 'cmd+\\' )//,
> //new ve.ui.Trigger( 'cmd+m' )
113,114c113,114
< new ve.ui.Trigger( 'ctrl+\\' ),
< new ve.ui.Trigger( 'ctrl+m' )
---
> new ve.ui.Trigger( 'ctrl+\\' )//,
> //new ve.ui.Trigger( 'ctrl+m' )
125c125,135
< 'strikethrough', { mac: new ve.ui.Trigger( 'cmd+shift+5' ), pc: new ve.ui.Trigger( 'ctrl+shift+5' ) }
---
> 'strong', { mac: new ve.ui.Trigger( 'cmd+h' ), pc: new ve.ui.Trigger( 'ctrl+h' ) }
> );
> ve.ui.triggerRegistry.register(
> 'ins', { mac: new ve.ui.Trigger( 'cmd+e' ), pc: new ve.ui.Trigger( 'ctrl+e' ) }
> );
> ve.ui.triggerRegistry.register(
> 'highlight', { mac: new ve.ui.Trigger( 'cmd+m' ), pc: new ve.ui.Trigger( 'ctrl+m' ) }
> );
> ve.ui.triggerRegistry.register(
> 'strikethrough', { mac: new ve.ui.Trigger( 'cmd+d' ), pc: new ve.ui.Trigger( 'ctrl+d' ) }
diff -r VisualEditor/modules/ve-mw/init/ve.init.mw.Target.js /var/www/html/wiki/extensions/VisualEditor/modules/ve-mw/init/ve.init.mw.Target.js
190,193c190,193
< include: [ { group: 'textStyle' }, 'language', 'clear' ],
< forceExpand: [ 'bold', 'italic', 'clear' ],
< promote: [ 'bold', 'italic' ],
< demote: [ 'strikethrough', 'code', 'underline', 'language', 'clear' ]
---
> include: [ { group: 'textStyle' }, 'strong', 'ins', 'highlight', 'clear' ],
> forceExpand: [ 'strong', 'ins', 'highlight', 'strikethrough', 'clear' ],
> promote: [ 'strong', 'ins', 'highlight', 'strikethrough', 'bold', 'italic', 'underline' ],
> demote: [ 'superscript', 'subscript', 'code', 'clear' ]
diff -r VisualEditor/VisualEditor.php /var/www/html/wiki/extensions/VisualEditor/VisualEditor.php
462a463,464
> 'lib/ve/src/dm/annotations/ve.dm.StrongAnnotation.js',
> 'lib/ve/src/dm/annotations/ve.dm.InsAnnotation.js',
534a537,538
> 'lib/ve/src/ce/annotations/ve.ce.StrongAnnotation.js',
> 'lib/ve/src/ce/annotations/ve.ce.InsAnnotation.js',
706a711,713
> 'visualeditor-annotationbutton-strong-tooltip',
> 'visualeditor-annotationbutton-ins-tooltip',
> 'visualeditor-annotationbutton-highlight-tooltip',
如果有人有兴趣，我也可以发布我创建的新课程;最后，我有兴趣听听有关如何以更易于维护的方式实现此类内容的任何建议。