MTAppjQuery

【第5回】組み込み拡張のオプション調整と出力 HTML の整形 - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ

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

目次

この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第5回です。今回は extensionOptions による組み込み拡張の調整と、htmlOutputOptions による出力 HTML の整形をご紹介します。

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

エディタの機能は「拡張」の集まり

MTRichTextEditor の土台である Tiptap は、機能を Extension（拡張）という単位で組み立てるエディタフレームワークです。太字も見出しもリンクも表も、それぞれが独立した拡張として実装されていて、MTRichTextEditor にはそれらがあらかじめ組み込まれています。

この構造のおかげで、カスタマイズも拡張の単位で考えられます。

  • 組み込みの拡張のオプションを変える、または無効化する → extensionOptions（今回）
  • 新しい拡張を追加する → extensions（次回）

extensionOptions で組み込み拡張を調整する

extensionOptions は「拡張の名前: オプション」の形で指定します。公式の開発者向けガイドに載っている例を見てみましょう。改行（<br>）を扱う hardBreak 拡張に、クラス付与のオプションを渡す例です。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        options.extensionOptions = {
            ...(options.extensionOptions || {}),
            hardBreak: {
                HTMLAttributes: {
                    class: 'my-hard-break',
                },
            },
        };
    });
}
</script>

これで、エディタ内で Shift + Enter による改行を入れると <br class="my-hard-break"> が出力されるようになります。

各拡張にどんなオプションがあるかは、Tiptap の各 Extension のドキュメントが参考になります。HTMLAttributes は多くの拡張が共通で持っているオプションで、その拡張が出力する要素に任意の属性を付けられます。

なお、extensionOptions には Movable Type が内部で使っている設定（画像アップロードの連携など）も入っています。第3回の toolbarOptions と同じく、丸ごと差し替えず、スプレッド構文で既存の内容を引き継いでから上書きしてください。

拡張を無効化する

拡張の名前に false を指定すると、その拡張自体を無効化できます。

MTRichTextEditor.on('create', (options) => {
    options.extensionOptions = {
        ...(options.extensionOptions || {}),
        // 上付き・下付き文字を使わせない
        superscript: false,
        subscript: false,
    };
});

ツールバーからボタンを消すのが「入口をふさぐ」対策だとすると、拡張の無効化は「機能そのものを取り除く」対策です。キーボードショートカットや貼り付けで書式が紛れ込むのも防げるので、確実に使わせたくない機能は拡張ごと無効化するのが堅実です。

ただし、無効化した拡張が扱っていた要素は、既存記事の本文に含まれているとエディタで正しく扱えなくなる可能性があります。運用中のサイトに適用する前に、過去記事を開いて壊れないか確認しておきましょう。

htmlOutputOptions で出力 HTML を整える

もうひとつ、地味ながら効くのが htmlOutputOptions です。エディタが最終的に書き出す HTML の整形ルールを指定できます。

オプション内容
formatfalse を指定すると整形処理そのものを無効化
indentSizeインデントの幅（デフォルトは 0）
contentUnformatted整形の対象外にするタグ（デフォルトは pre など）

たとえば、書き出される HTML を2スペースのインデントで整形するなら次のとおりです。

MTRichTextEditor.on('create', (options) => {
    options.htmlOutputOptions = {
        indentSize: 2,
    };
});

contentUnformatted に指定したタグの中身は整形されません。pre の中のコードが勝手にインデントされては困るので、デフォルトで対象外になっています。独自に整形を避けたいタグがある場合はここに追加します。

出力 HTML の形は、公開ページの差分管理やテンプレートでの後処理に効いてきます。「エディタで保存し直したら本文の HTML が微妙に変わって差分だらけになった」という事態を避けたいときは、このオプションでルールを固定しておくと安心です。

落とし穴：「ソースコード」ボタンでは確認できない

indentSize: 2 を指定したあと、ツールバーの「ソースコード」ボタンを押して確認しようとすると、インデントは 2 にならず 4 のままです。設定を間違えたように見えますが、これは設定が効いていないわけではありません。

「ソースコード」のモーダルは、htmlOutputOptions を渡さずに整形処理を呼び出しています。そのため、整形ライブラリ側のデフォルト値である 4 スペースで表示されます。htmlOutputOptions が効くのは、エディタがフィールドへ HTML を書き出すときだけです。

確認したいときは、そのフィールドの入力フォーマットを一旦「なし」に切り替えてください。リッチテキストエディタが外れてテキスト（複数行）フィールドになり、エディタが書き出した生の HTML がそのまま表示されます。ここでインデントが 2 スペースになっていれば、設定は正しく効いています。

フォーマットを切り替えた時点でエディタの出力結果が渡されるので、記事を保存する必要はありません。確認が済んだら、フォーマットをリッチテキストエディタに戻しておきましょう。

まとめ

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

  • MTRichTextEditor の機能は Tiptap の拡張の集まり。調整も拡張の単位で考える
  • 組み込み拡張のオプション変更は extensionOptions。HTMLAttributes で出力要素に属性を付けられる
  • 拡張名に false を指定すると機能ごと無効化できる。既存記事への影響は事前確認を
  • 出力 HTML の整形ルールは htmlOutputOptions で固定できる
  • ただし「ソースコード」ボタンでは反映を確認できない。入力フォーマットを「なし」にして生の HTML を見る

次回はいよいよ、Tiptap 拡張とカスタムボタンを使った独自機能の追加に挑戦します。

今回は以上となります。

この記事をシェア

関連記事