3

我在我的 Wiki 上运行了 MediaWiki VisualEditor 扩展，它运行良好。但是，我想自定义主 VE 工具栏以添加不同字体样式的列表，例如： 1. new --> 将文本换行<span class='new'>text here</span> 2. old --> 将文本换行<span class='old'>text here</span>

有没有关于如何做到这一点的例子？

链接问题下的答案可能朝着正确的方向发展，但我无法让它在我的环境中工作 - 链接不会添加到我的 VE 工具栏。也许我错过了一步，但即便如此，它也只会添加一个链接，而不是围绕我的文本包装样式。所以请帮忙！

4

1 回答 1

2

因此，经过大量试验和错误并查看了许多不同的帖子，我终于自己解决了这个问题；但我不确定这不是黑客行为；事实上，我正在编辑现有的类——添加我自己的注释——而不是创建一个干净的扩展。

这是我修改的可视化编辑器版本：可视化编辑器：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',

如果有人感兴趣，我也可以发布我创建的新课程；最后，我很想听听任何建议如何以更可维护的方式实现这样的东西。

于 2015-11-07T18:59:06.683 回答