How to customize the MediaWiki VisualEditor

Question

I have the MediaWiki VisualEditor extension running on my Wiki and it works great. However, I'd like to customize the main VE toolbar to add a list of different font styles such as: 1. new --> would wrap the text in <span class='new'>text here</span> 2. old --> would wrap the text in <span class='old'>text here</span>

Is there an example on how to accomplish this?

The answer under the link question may be going in the right direction, but I couldn't get it to work in my environment - the link wouldn't get added to my VE toolbar. Maybe I'm missing a step, but even then, it would only add a link, and not wrap a style around my text. So please help!

Answer 1

So I finally solved this problem myself after lots of trial and error and looking at many different posts; but I'm not confident that this isn't a hack; in fact, I'm editing the existing classes - adding my own annotations - instead of creating a clean extension.

Here is the VisualEditor version that I've modified: VisualEditor: REL1_25 2015-09-17T18:15:26 be84313

Here are the diffs of my modifications:

        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',

If anyone is interested, I can also post the new classes that I created; finally, I'd be interested to hear any suggestions how to implement something like this in a more maintainable fashion.