【第2回】ツールバーのカスタマイズ - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ

この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第2回です。今回は、リッチテキストエディタのツールバーをカスタマイズする方法をご紹介します。

コードを書き込む場所（自由テキストエリア）とベースコードについては第1回をご覧ください。

ツールバーは4階層の配列で定義する

TinyMCE のツールバーは 'bold italic | link unlink' のような文字列で定義しましたが、MTRichTextEditor では入れ子の配列で定義します。構造は次の4階層です。

行 > 左右の配置 > グループ > ボタン名

言葉だけだと分かりにくいので、実際のデフォルト値を見てみましょう。

[
    [ // 1行目
        [ // 左寄せのエリア
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'bulletList', 'orderedList', 'horizontalRule'],
            ['link', 'unlink'],
            ['insertHtml', 'file', 'image'],
            ['table']
        ],
        [ // 右寄せのエリア
            ['source']
        ]
    ],
    [ // 2行目
        [ // 左寄せのエリア
            ['undo', 'redo'],
            ['foregroundColor', 'backgroundColor', 'removeFormat'],
            ['alignLeft', 'alignCenter', 'alignRight'],
            ['indent', 'outdent'],
            ['block'],
            ['fullScreen']
        ]
    ]
]

1行目には左寄せと右寄せの2つのエリアがあり、「ソースコード」ボタンだけが右端に配置されています。2行目は左寄せのエリアだけです。グループの区切りは、ツールバー上では縦の区切り線として表示されます。

TinyMCE の文字列に慣れていると最初は戸惑いますが、「| の区切りがグループの配列になった」「行の中に左右の配置が挟まった」と考えると理解しやすいと思います。

使えるボタン名の一覧

標準で用意されているボタンは次の28個です。

TinyMCE と違ってキャメルケース（bulletList のように単語の区切りを大文字にする書き方）なので、書き間違いに注意してください。

TinyMCE のボタン名との対応

TinyMCE からの移行組の方向けに、主なボタン名の対応表も載せておきます。

ツールバーを丸ごと差し替える

いちばん分かりやすいのは、options.toolbar に新しい配列を丸ごと代入する方法です。たとえば「太字・斜体・リンク・段落だけの最小構成にして、元に戻す・やり直しは右端に置く」なら次のようになります。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        options.toolbar = [
            [
                [
                    ['block'],
                    ['bold', 'italic'],
                    ['link', 'unlink'],
                ],
                [
                    ['undo', 'redo'],
                ],
            ],
        ];
    });
}
</script>

編集者に使ってほしい機能だけに絞ると、記事の見た目のばらつきを抑えられます。運用ルールで「文字色は使わない」と決めているなら、ボタン自体を消してしまうのが確実です。

既存のツールバーを部分的に加工する

丸ごと差し替えではなく「今の構成から画像とファイルのボタンだけ消したい」というケースもあります。create イベントに渡ってくる options.toolbar には、設定画面の内容を反映したツールバーがすでに入っているので、これを加工します。

構造が4階層あるので、加工には再帰的な処理が必要です。ボタンを取り除くヘルパー関数を作っておくと便利です。

<script type="module">
if (window.MTRichTextEditor) {
    // toolbar から指定したボタンを取り除く
    const removeItems = (toolbar, names) =>
        toolbar.map((row) =>
            row.map((side) =>
                side.map((group) => group.filter((item) => !names.includes(item)))
                    .filter((group) => group.length > 0)
            )
        );

    MTRichTextEditor.on('create', (options) => {
        options.toolbar = removeItems(options.toolbar, ['image', 'file']);
    });
}
</script>

filter でボタンを取り除いたあと、空になったグループも取り除いています。こうしておかないと、中身のないグループの区切り線だけが残ってしまいます。

逆にボタンを追加したい場合は、位置を指定して足します。その際に押さえておきたいのが、配列の添字と「何行目」の数え方の違いです。JavaScript の配列は 0 から数えるので、人が「1行目」と呼ぶ行が [0]、「2行目」が [1] になります。左右の配置も同じで、左寄せが [0]、右寄せが [1] です。

4階層を通して書くと options.toolbar[行][左右][グループ][ボタン] の順になります。

配列を直接書き換えるとボタンが増えてしまう

2行目の左寄せエリアの末尾に structure（文書構造）ボタンのグループを追加してみます。ここで次のように書くと、ボタンが2つ3つと増えてしまいます。

// 意図した結果になりません
MTRichTextEditor.on('create', (options) => {
    options.toolbar[1][0].push(['structure']);
});

理由は2つあります。ひとつは create が編集画面のリッチテキスト欄の数だけ呼ばれることです。記事の編集画面なら「本文」と「続き」で2回、リッチテキストのカスタムフィールドがあればさらに増えます。もうひとつは、毎回渡ってくる options.toolbar が同じ配列だということです。push は配列そのものを書き換えるので、呼ばれた回数だけグループが積み重なってしまいます。

元の配列は変更せず、複製したほうを書き換えて差し替えます。

MTRichTextEditor.on('create', (options) => {
    // 2行目 > 左寄せエリア にグループを追加
    const toolbar = structuredClone(options.toolbar);
    toolbar[1][0].push(['structure']);
    options.toolbar = toolbar;
});

structuredClone は配列やオブジェクトを深く複製する標準の関数です。複製したほうだけを書き換えているので、create が何回呼ばれても結果は同じになります。先ほどの removeItems が map と filter で新しい配列を作って options.toolbar に代入していたのも、同じ理由です。

push そのものが悪いわけではなく、共有されている配列を書き換えてしまうことが問題です。options.toolbar は直接書き換えず、作り直して代入すると覚えておくと安全です。

設定画面でツールバーを変更している場合は行数や構成が変わっているので、第1回でご紹介したコンソールでの確認方法で現状の options.toolbar を見てから書くのが安全です。

まとめ

今回のポイントを整理しておきます。

• ツールバーは「行 > 左右の配置 > グループ > ボタン名」の4階層の配列
• ボタン名はキャメルケースで28種類。TinyMCE とは名前が異なるものが多い
• 配列の添字は 0 から数えるので、1行目が [0]、2行目が [1]
• 構成を大きく変えるなら丸ごと差し替え、少しだけ変えるなら加工が向いている
• options.toolbar には設定画面の内容が反映済みで渡ってくる。ただし create が呼ばれるたびに同じ配列が渡ってくるので、直接書き換えず複製して差し替える

次回は、段落ドロップダウンの項目とカラーパレットのカスタマイズを取り上げます。

今回は以上となります。