Généralités

Le dossier extensions/WikiEditor/modules/images doit être accesible en lecture.

Configuration

LocalSettings.php

# Enables use of WikiEditor by default but still allow users to disable it in preferences
$wgDefaultUserOptions['usebetatoolbar'] = 1;
$wgDefaultUserOptions['usebetatoolbar-cgd'] = 1;

# Displays the Preview and Changes tabs
$wgDefaultUserOptions['wikieditor-preview'] = 1;

# Displays the Publish and Cancel buttons on the top right side and active the publish popup
$wgDefaultUserOptions['wikieditor-publish'] = 1;

$wgDefaultUserOptions['usenavigabletoc']    = 0; # colonne de navigation
#$wgDefaultUserOptions['wikieditor-template-editor'] = 1;
#$wgDefaultUserOptions['wikieditor-highlight'] = 1;

Customisation

OOUI Icons (resources/lib/ooui/themes/wikimediaui/images/icons)

Modification avec du code javascript

Éditer la page MediaWiki:Common.js

Common.js

jQuery(document).ready(function($) {

var customizeToolbar = function() {
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
    'section': 'main',
    'group': 'format'
});
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
    'section': 'main',
    'group': 'insert'
});
 
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
    'section': 'main',
    'groups': {
        'balises': {
            'tools': {
                'newline': {
                    'labelMsg': 'wikieditor-toolbar-tool-newline',
                    'type': 'button',
                    'oouiIcon': 'newline',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': '<br>\n'
                        }
                    }
                },
                'kode': {
                    'label': 'kode',
                    'type': 'button',
                    'oouiIcon': 'code',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "<kode lang=''>\n",
                            'post': "\n</kode>"
                        }
                    }
                },
                'filebox': {
                    'label': 'filebox',
                    'type': 'button',
                    'oouiIcon': 'article',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "<filebox fn=''>\n",
                            'post': "\n< /filebox>"
                        }
                    }
                },
                'syntaxhighlight': {
                    'label': 'syntaxhighlight',
                    'type': 'button',
                    'oouiIcon': 'highlight',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "<syntaxhighlight lang='' inline>",
                            'post': "< /syntaxhighlight>"
                        }
                    }
                },
                'pre': {
                    'label': 'pre',
                    'type': 'button',
                    'oouiIcon': 'markup',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "<pre>",
                            'post': "</pre>"
                        }
                    }
                }
            }
        },
        'templates': {
            'tools': {
                'boxx': {
                    'label': 'boxx',
                    'type': 'button',
                    'oouiIcon': 'window',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{{boxx|",
                            'post': "}}"
                        }
                    }
                },
                'info': {
                    'label': 'info',
                    'type': 'button',
                    'oouiIcon': 'notice',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{{info | ",
                            'post': "}}"
                        }
                    }
                },
                'warn': {
                    'label': 'warn',
                    'type': 'button',
                    'oouiIcon': 'alert',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{{warn | ",
                            'post': "}}"
                        }
                    }
                },
                'list-plus': {
                    'label': 'list-plus',
                    'type': 'button',
                    'oouiIcon': 'add',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{{ListPlusMinus|type=plus|list=\n",
                            'post': "\n}}"
                        }
                    }
                },
                'list-minus': {
                    'label': 'list-minus',
                    'type': 'button',
                    'oouiIcon': 'subtract',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{{ListPlusMinus|type=minus|list=\n",
                            'post': "\n}}"
                        }
                    }
                }
            }
        },
        'char': {
            'tools': {
                '->': {
                    'label': '\u2192',
                    'type': 'button',
                    'oouiIcon': 'arrowNext',
                    'action': {
                        'type': 'encapsulate', 
                        'options': { 
                            'pre': "\u2192"
                        }
                    }
                },
                '«»': {
                    'label': "\u00ab\u00bb",
                    'type': 'button',
                    'oouiIcon': 'ongoingConversation',
                    'action': {
                        'type': 'encapsulate', 
                        'options': { 
                            'pre': "\u00ab ", 
                            'post': " \u00bb" 
                        }
                    }
                }
            }
        },
        'insert': {
            'tools': {
                'category': {
                    'label': 'category',
                    'type': 'button',
                    'oouiIcon': 'linkExternal',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "[[Category:",
                            'post': "]]"
                        }
                    }
                },
                'image': {
                    'label': 'image',
                    'type': 'button',
                    'oouiIcon': 'imageGallery',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "[[File:",
                            'post': "]]"
                        }
                    }
                },
                'table': {
                    'labelMsg': 'wikieditor-toolbar-tool-table',
                    'type': 'button',
                    'oouiIcon': 'table',
                    'filters': [ '#wpTextbox1:not(.toolbar-dialogs)' ],
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "{| class=\"wikitable wtp\" \n",
                            'peri': '! Titre colonne 1\n! Titre colonne 2\n|-\n| colonne1 || colonne2',
                            'post': "\n|}",
                            'ownline': true
                        }
                    }
                },
                nowiki: {
                    labelMsg: 'wikieditor-toolbar-tool-nowiki',
                    type: 'button',
                    oouiIcon: 'noWikiText',
                    action: {
                        type: 'encapsulate',
                        options: {
                            pre: '<nowiki>',
                            periMsg: 'wikieditor-toolbar-tool-nowiki-example',
                            post: '</nowiki>'
                        }
                    }
                }
            }
        }
    }
} );  // close $('#wpTextbox1').wikiEditor
 
};  // close customizeToolbar
 
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
    mw.loader.using( 'user.options').then( function () {
        // This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
        if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) {
            $.when(
                mw.loader.using( 'ext.wikiEditor' ), $.ready
            ).then( customizeToolbar );
        }
    } );
}

});  // close jQuery(document).ready

Modification de la configuration existante

Méthode plus simple et plus directe, mais le fichier sera écrasé lors de la prochaine mise à jour.

/extensions/WikiEditor/modules/jquery.wikiEditor.toolbar.config.js

// Main section
'main': {
    'type': 'toolbar',
    'groups': {
        'balises': { // nouveau groupe
            'tools': {
                'code': { // nouveau bouton
                    'label': 'code',
                    'type': 'button',
                    // le chemin vers l’icône peut être absolu
                    // ou relatif par rapport à /extensions/WikiEditor/modules/images/toolbar
                    // si l’icône n'existe pas, le texte du label sera affiché à la place
                    'icon': '/extensions/WikiEditor/modules/images/toolbar/custom/kode.png',
                    'action': {
                        'type': 'encapsulate',
                        'options': {
                            'pre': "<code>",
                            'post': "</code>"
                        }
                    }
                },

// Caractères spéciaux
'characters': {
    'labelMsg': 'wikieditor-toolbar-section-characters',
    'type': 'booklet',
    'deferLoad': true,
    'pages': {
        'symbols': {
            'labelMsg': 'wikieditor-toolbar-characters-page-symbols',
            'layout': 'characters',
            'characters': [
                "\u2192", // →
                {
                    'label': "\u00ab\u00bb",
                    'action': {
                        'type': 'encapsulate', 'options': { 'pre': "\u00ab", 'post': "\u00bb" }
                    }
                }, // « »

Afficher du texte dans les boutons au lieu d'images

extensions/WikiEditor/modules/jquery.wikiEditor.toolbar.js

$button = $( '<a>' )
    .attr( {
        href: '#',
        title: label,
        rel: id,
        role: 'button',
        'class': 'tool tool-button'
    } )
    .text( label );
// si text a été définit, on annule text-indent et on met le text dans le bouton
if (tool.text) {
    $button.css( 'text-indent', '0' );
    $button.css( 'text-align', 'center' );
    $button.text( tool.text );
} else {
    if ( typeof offsetOrIcon === 'object' ) {
        $button
        .addClass( 'wikiEditor-toolbar-spritedButton' )
        .css( 'backgroundPosition', offsetOrIcon[ 0 ] + 'px ' + offsetOrIcon[ 1 ] + 'px' );
    } else {
        $button
        .css( 'background-image', 'url(' + offsetOrIcon + ')' );
    }
}

Common.js

'syntaxhighlight': {
    'label': 'syntaxhighlight',
    'type': 'button',
    // on définit text à la place de icon
    'text': 'Sy',
    'action': {
        'type': 'encapsulate',
        'options': {
            'pre': "<syntaxhighlight lang=bash inline>",
            'post': "< /syntaxhighlight>"
        }
    }
},

Thème dark

skins/MonoBook/resources/custom.css

/* Changer le fond de WikiEditor Preview */
.wikiEditor-preview-contents,
.wikiEditor-ui-controls,
.wikiEditor-ui-tabs div,
.wikiEditor-ui-buttons { background-color:#262626 !important; }

.wikiEditor-ui-tabs div.current a,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited { color:white !important; }

.wikiEditor-ui-tabs div a,
.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a:visited { color:#1C8BCE !important; }

.wikiEditor-ui-buttons { border-top-color:#262626 !important; }

.wikiEditor-ui-toolbar { background-image:none !important; background-color:#262626 !important; }

#wikiEditor-ui-toolbar .oo-ui-iconElement { background-color: grey !important } /* fond pour rendre les icones noires visibles */
 /* Avancé */
#wikiEditor-section-advanced { background: #262626 }
#wikiEditor-section-advanced .label { color: white }
#wikiEditor-section-advanced .tool-select { background: #262626 }
.wikiEditor-ui-toolbar .group .tool-select .menu .options { background: #262626 !important }

Masquer la popup de confirmation lors de la publication

extensions/WikiEditor/modules/jquery.wikiEditor.publish.js

context.fn.addButton( {
    'captionMsg': 'wikieditor-publish-button-publish',
    'action': function () {
        //$( '#' + dialogID ).dialog( 'open' );
        //return false;
    }
} );

Boutons Annuler

Le bouton annuler renvoie vers /undefined
Solution: masquer le bouton Annuler en commentant le code suivant.

extensions/WikiEditor/modules/jquery.wikiEditor.publish.js

context.fn.addButton( {
    captionMsg: 'wikieditor-publish-button-cancel',
    action: function () {
        // #mw-editform-cancel n'existe plus
        window.location.href = $( '#mw-editform-cancel' ).attr( 'href' );
        return false;
    }
} );

Boutons Publier et Annuler

Le bouton Publier ne fait rien et le bouton Annuler publie.
Bugzilla

Code bogué

extensions/WikiEditor/modules/jquery.wikiEditor.publish.js

context.fn.addButton( {
    captionMsg: 'wikieditor-publish-button-cancel',
    action: function () {
        #window.location.href = $( '#mw-editform-cancel' ).attr( 'href' );
        return false;
    }
} );

Code corrigé

extensions/WikiEditor/modules/jquery.wikiEditor.publish.js

...
},
// initialisation de fenêtre de dialogue `dialogID`
immediateCreate: true,
dialog: {
...

context.fn.addButton( {
    'captionMsg': 'wikieditor-publish-button-publish',
    'action': function () {
        // l'ouverture du fenêtre de dialogue ne me paraissant pas utile
        // je trouve préférable que le bouton Publier publie directement
        // c'est ce qui se passe si on commente tout le code de la fonction

        //$( '#' + dialogID ).dialog( 'open' );
        //return false;
    }
} );

context.fn.addButton( {
    'captionMsg': 'wikieditor-publish-button-cancel',
    'action': function () {
        // on simule un clique sur le lien Annuler
        window.location.href = $( '#mw-editform-cancel' ).attr( 'href' );
        // ou bien
        $('#mw-editform-cancel')[0].click();
        return false;
    }
} );

Erreurs

Erreur lors de la validation d'une modification: directory index of "WikiEditor/modules/images/toolbar/" is forbidden

[error] directory index of "extensions/WikiEditor/modules/images/toolbar/" is forbidden
[error] open() "extensions/WikiEditor/modules/images/toolbar/icon.jpg" failed (2: No such file or directory)

Cela ce produit si la valeur du champs icon est vide ou pointe vers un fichier inexistant.

/extensions/WikiEditor/modules/jquery.wikiEditor.toolbar.config.js

'tt': {
    'label': 'tt',
    'type': 'button',
    'icon': '',
    'action': {
        'type': 'encapsulate',
        'options': {
            'pre': "<tt>",
            'post': "</tt>"
        }
    }
}