MTAppjQuery

【第3回】段落ドロップダウンとカラーパレットのカスタマイズ - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ

2026-08-24
7分で読了
更新: 2026-08-24
mtappjquery-customize-rte.webp

目次

この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第3回です。今回は toolbarOptions を使って、段落ドロップダウンの項目とカラーパレットをカスタマイズします。

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

toolbarOptions とは

第2回でカスタマイズした toolbar は「どのボタンを、どこに並べるか」の設定でした。今回の toolbarOptions は「それぞれのボタンの中身」を調整する設定です。

MTRichTextEditor.on('create', (options) => {
    options.toolbarOptions = {
        ...options.toolbarOptions,
        // ボタン名: { 設定 } の形で書く
    };
});

options.toolbarOptions には、設定画面で保存した段落・カラーの設定が反映された状態で渡ってきます。スプレッド構文（...options.toolbarOptions）で既存の内容を引き継ぎつつ、変更したいボタンだけ上書きするのが基本形です。ここを丸ごと差し替えてしまうと、画像挿入などエディタが内部で使っている設定まで消えてしまうので注意してください。

段落ドロップダウンの項目を絞る

段落ドロップダウン（ツールバーの block ボタン）に表示される項目は、block の blocks で指定します。指定できる値は次の8種類です。

  • paragraph（段落）
  • h1 〜 h6（見出し 1〜6）
  • pre（書式設定済み）

既定ではこの8種類すべてが並びます。使う見出しのレベルが決まっているなら、絞っておくと選び間違いがなくなります。たとえば本文の見出しは h2 と h3 だけ、という運用に合わせるなら次のようになります。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        options.toolbarOptions = {
            ...options.toolbarOptions,
            block: {
                blocks: ['paragraph', 'h2', 'h3'],
            },
        };
    });
}
</script>

記事ページでは h1 はタイトルに使うので本文には入れさせない、というのは定番の運用ルールだと思います。ドロップダウンから消してしまえば、うっかり選ばれることもなくなります。書式設定済み（pre）も使う場面がなければ、同じように外しておけます。

なお、TinyMCE の formats のように独自のクラスを付けた書式をこのドロップダウンに追加する仕組みは、現時点では用意されていません。独自の見た目を持つ要素を挿入したい場合は、第6回で取り上げる Tiptap 拡張やカスタムボタンでのアプローチになります。

カラーパレットを変更する

文字色（foregroundColor）と背景色（backgroundColor）のパレットは、それぞれ presetColors で指定します。

<script type="module">
if (window.MTRichTextEditor) {
    const brandColors = [
        '#000000',
        '#333333',
        '#516ab6',
        '#38761d',
        '#ac0000',
    ];

    MTRichTextEditor.on('create', (options) => {
        options.toolbarOptions = {
            ...options.toolbarOptions,
            foregroundColor: { presetColors: brandColors },
            backgroundColor: { presetColors: ['#eaf3ff', '#fff8e1', '#fdebee'] },
        };
    });
}
</script>

デフォルトのパレットは36色もあり、自由度が高いぶん記事ごとに色がばらつきがちです。サイトのブランドカラーに絞ってしまうのがおすすめです。文字色と背景色で別のパレットを指定できるので、背景色はマーカー用途の淡い色だけにする、といった調整もできます。

リンクの初期設定を変える

toolbarOptions でもうひとつ実用的なのが、リンク挿入ダイアログの初期ターゲットです。

options.toolbarOptions = {
    ...options.toolbarOptions,
    link: { defaultTarget: '_blank' },
};

これでリンク挿入時の「新規ウィンドウ」が初期選択になります。なお、サイトの設定に「リンクのデフォルトターゲット」がある場合はそちらの値が初期値として渡ってくるので、この指定はそれを上書きする形になります。

設定画面との使い分け

第1回でお伝えしたとおり、段落とカラーパレットは MT9 の設定画面（システム管理メニューの「リッチテキストエディタ」）でも変更できます。では、どう使い分けるのが良いでしょうか。

僕のおすすめは次の考え方です。

  • 全サイト共通で良い設定は、設定画面で行う。コードを書かない方が管理も引き継ぎも楽です
  • サイトごとに変えたい設定は、MTAppjQuery で行う。設定画面はシステム全体で共通なので、サイト別の調整はコードでしかできません

MTAppjQuery の自由テキストエリアはサイトごとに設定できるので、「サイト A は見出し2〜3だけ、サイト B はデフォルトのまま」という出し分けが自然に実現できます。このあたりは連載の最終回で改めて詳しく取り上げます。

まとめ

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

  • ボタンの中身の調整は toolbarOptions。スプレッド構文で既存の設定を引き継いでから上書きする
  • 段落ドロップダウンは block.blocks。指定できるのは paragraph / h1〜h6 / pre の8種類
  • カラーパレットは foregroundColor.presetColors と backgroundColor.presetColors
  • 全サイト共通は設定画面、サイト別は MTAppjQuery という使い分けがおすすめ

次回は、エディタの中の見た目を実際のサイトに合わせる方法を取り上げます。

今回は以上となります。

この記事をシェア

関連記事