Confluenceのエディターに機能を追加したいとき。。

Confluenceのページ編集機能は、TinyMCEのカスタマイズ版を使っています。
なので、機能を拡張するときはTinyMCEのプラグインとしてモジュールを追加するのがよさそうです。

init.rteをフックする方法を使った記事がありましたが、直接飛んだり、リロードすると呼ばれなかったりとちょっとはまりました。

TinyMCEは、現在ver.5のデベロッパープレビューが出ていますが、手元のConfluence6.7.xでは、ver.3をカスタマイズしたものを利用していました。ドキュメントを見るときは注意が必要です。ver5のAPIと結構違いがあります。

ここ(https://developer.atlassian.com/server/confluence/enabling-tinymce-plugins/) に本家のチュートリアルがあります。

結局やることとしては...

web resourceに、<dependency>editor<dependency>と、以下のjsを読み込むようにしておく。

くらいで最低限のことはできそうです。

// プラグインの定義
define('プラグイン名', ['ajs', 'jquery'], function (AJS, $){
    "use strict";

    return {
        init : function(ed) {
            // ボタンを登録するグループを新規追加、既存のグループは、↑のリンクにある
            $("#rte-toolbar .toolbar-primary").append($("<ul class='aui-buttons'></ul>")
                .addClass("rte-toolbar-group-example"));

            // コマンドmceExampleの処理を記載
            ed.addCommand('mceExample', function() {
                // html片をカーソル位置に入れてみます
                tinymce.activeEditor.execCommand('mceInsertContent', false, '<h1>XXX</h1>');
            });

            // ボタンを登録
            ed.addButton('confluence-example-button', {
                title: "xxx", // アイコンだけ表示したければ、ブランクにしておく
                tooltip: "xxx",
                cmd: "mceExample",
                className: "example",
                icon: "aui-icon aui-icon-small aui-iconfont-addon",
                locationGroup: "rte-toolbar-group-example", // 上で作ったグループ名を指定
                weight: 0
            });
        },
        getInfo : function() {
            return {
                longname : 'Example',
                author : 'Atlassian',
                authorurl : 'http://www.atlassian.com',
                version : tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    }
});

// 作ったプラグインを登録するおまじない
require('confluence/module-exporter')
    .safeRequire('プラグイン名', function(ExamplePlugin) {
        var tinymce = require('tinymce');

        tinymce.create('tinymce.plugins.ExamplePlugin', ExamplePlugin);

        // Register plugin
        tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

        require('confluence-editor/loader/tinymce-bootstrap').addTinyMcePluginInit(function(settings) {
            settings.plugins += ",example";
        });
    });