MTAppjQuery

【第1回】必要な基礎知識と準備 - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ

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

目次

この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第1回です。

Movable Type 9 で標準になった新しいリッチテキストエディタ「Movable Type Rich Text Editor（MTRichTextEditor）」を、MTAppjQuery を使ってカスタマイズしていく連載です。第1回の今回は、カスタマイズに必要な基礎知識と、準備となるベースコードをご紹介します。

なお、Movable Type 7 / 8 の TinyMCE のカスタマイズについては「MTAppjQuery v3 で Movable Type の TinyMCE をカスタマイズ」という別の連載でご紹介しています。TinyMCE をお使いの方はそちらをご覧ください。

MT9 の新しいリッチテキストエディタ

Movable Type 9 では、リッチテキストエディタが TinyMCE から Tiptap ベースの MTRichTextEditor に変わりました。新規インストールではこちらが標準のエディタになります。

内部的には MTRichTextEditor というプラグインとして実装されていて、エディタ本体の JavaScript は mt-static/plugins/MTRichTextEditor/dist/iife/index.js として読み込まれます。TinyMCE とはまったく別物なので、TinyMCE 向けに書いたカスタマイズコード（MT.Editor.TinyMCE.config を書き換える方法）はそのままでは使えません。

ちなみに MT9 には TinyMCE 6 系も引き続き同梱されています。既存のカスタマイズ資産を活かしたい場合はエディタを TinyMCE に切り替えるという選択肢もありますが、これから標準になっていくのは MTRichTextEditor です。この連載では新しいエディタのカスタマイズ方法を身につけていきましょう。

設定画面でできること・できないこと

カスタマイズの話に入る前に、コードを書かなくてもできることを確認しておきます。

MT9 には、システム管理メニューに「リッチテキストエディタ」という設定画面が用意されています。ここでは次のことができます。

  • ツールバーに表示するボタンの選択と並べ替え（ドラッグ&ドロップ）
  • 段落ドロップダウンに表示する項目の選択（段落・見出し 1〜6・書式設定済み）
  • 文字色・背景色のカラーパレットの変更
  • ウェブページ埋め込み機能の設定

まずはこの設定画面で足りるかどうかを確認するのがおすすめです。コードを書かずに済むならそれに越したことはありません。

ただし、この設定画面には大きな制約が2つあります。

  1. 設定はシステム全体で共通です。サイト（ブログ）ごとに違う設定にはできません
  2. 変更できるのは上に挙げた項目だけで、独自ボタンの追加やエディタの見た目の変更などはできません

複数サイトを運用していて「このサイトだけツールバーを絞りたい」といった要望が出てきたとき、あるいは設定画面にない項目をカスタマイズしたいときに、MTAppjQuery の出番になります。

カスタマイズの仕組み

MTRichTextEditor には、公式にサポートされた JavaScript のカスタマイズ API があります。中心になるのは次のコードです。

MTRichTextEditor.on('create', (options) => {
    // ここで options を書き換える
});

create イベントは、エディタが生成される直前に発火します。このタイミングで options オブジェクトを書き換えると、その内容でエディタが初期化されるという仕組みです。TinyMCE 連載で MT.Editor.TinyMCE.config を上書きしていたのと、考え方は同じですね。

options で変更できる主な項目は次のとおりです。この連載で順に取り上げていきます。

オプション内容取り上げる回
toolbarツールバーのボタン構成第2回
toolbarOptions各ボタンの細かい設定（段落・カラーパレットなど）第3回
stylesheets / classNames / heightエディタの見た目第4回
extensionOptions組み込み拡張のオプション第5回
htmlOutputOptions出力される HTML の整形第5回
extensionsTiptap 拡張の追加第6回

このほかに statusbar（ステータスバー）、pasteMenu（貼り付けメニュー）、quickAction（クイックアクション）などもあります。

公式の詳しい情報は Movable Type Rich Text Editor 開発者向けガイド にまとまっています。この連載でも随時参照していきます。

MTAppjQuery からカスタマイズする準備

公式の開発者向けガイドでは、カスタマイズ用のプラグインを自作して組み込む方法が案内されています。ただ、ちょっとしたカスタマイズのためにプラグインを作るのは大げさですし、サイトごとの出し分けも自前で書く必要があります。

MTAppjQuery があれば、プラグイン開発は不要です。MTAppjQuery v3.6.9 以降をお使いの場合は、プラグインの設定画面で「自由テキストエリア ＞ js_include の出力直前」に次のベースコードを貼り付けます。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        // ここにカスタマイズを書いていく
        console.log('MTRichTextEditor options:', options);
    });
}
</script>

これが連載を通して使うベースコードです。第2回以降は、コメントの位置に各回のカスタマイズを書き足していきます。

「js_include の出力直前」は v3.6.9 で追加された入力欄で、書いた内容をプラグインが安全な位置で js_include 変数（管理画面が読み込む JavaScript 群がまとめられる変数）の末尾に追記します。ここに書いたコードは、jQuery や翻訳データなど管理画面の基本スクリプトと MTRichTextEditor 本体が読み込まれたあと、エディタが生成される前に実行されます（MT 9.2.0 で確認しています）。カスタマイズコードの置き場所としてちょうどよい位置です。ただし MTAppjQuery.js より前のタイミングなので、mtapp の各メソッドはまだ使えません。

なお、if (window.MTRichTextEditor) で囲んでいるのは、リッチテキストエディタを使わない画面や、エディタを TinyMCE に切り替えている環境でエラーにしないためです。

v3.6.8 以前をお使いの場合

「js_include の出力直前」の入力欄は v3.6.9 で追加されたものなので、それより前のバージョンにはありません。v3.6.8 以前をお使いの場合は「自由テキストエリア ＞ head の開始タグの直後」に、同じベースコードをそのまま貼り付けてください。

こちらの入力欄に書いた内容は、文字どおり <head> タグのすぐ後ろ、つまりエディタ本体より前に挿入されます。それでも問題なく動くのは、ベースコードが <script type="module"> だからです。module のスクリプトはページの HTML をすべて読み込み終わってから実行されるため、書いた場所がどこであっても「エディタ本体の読み込み後、かつエディタが生成される前」というちょうどよいタイミングになります。公式の開発者向けガイドでも同じ書き方が使われています。

mt:SetVarBlock で js_include に追記しない

TinyMCE 連載をお読みの方は、自由テキストエリアのコードを <mt:SetVarBlock name="js_include" append="1"> で囲んで js_include 変数に追記する書き方をご存じだと思います。MT9 では、この書き方は使わないでください。

MT9 に同梱されている AssetUploader プラグインは、管理画面テンプレートの中で「最初に現れる js_include ノード」を目印にして、自分のスクリプトをその直前に挿入する実装になっています。自由テキストエリア（head の開始タグの直後）に mt:SetVarBlock name="js_include" を書くと、これが head 先頭に置かれてテンプレート内の最初の js_include ノードになってしまい、AssetUploader のスクリプトが本来より早い位置（翻訳データの Lexicon が定義される前）に引き寄せられます。その結果、管理画面の全ページで次のエラーが発生します。

Uncaught TypeError: Cannot set properties of undefined (setting 'Embed asset')

v3.6.9 の「js_include の出力直前」は、この問題をプラグイン側で回避した安全な追記手段です。ここまでご紹介したとおり、素の <script type="module"> をどちらかの入力欄に貼る形にしておけば、この問題は起こりません。

動作確認の方法

ベースコードを保存したら、記事の編集画面を開いてブラウザの開発者ツールを確認してみましょう。コンソールに MTRichTextEditor options: から始まるログが出ていれば、create イベントを捕まえられています。

あわせて、コンソールで次のコードを実行すると現在の状態を確認できます。

// ページ内に生成されたエディタの一覧（キーはテキストエリアの id）
Object.keys(MTRichTextEditor.Editors);

// 設定画面の内容がどう渡っているか
JSON.parse(
    document.querySelector('[data-mt-rich-text-editor-settings]')
        .dataset.mtRichTextEditorSettings
);

2つ目のコードを実行すると、設定画面で保存したツールバーや段落・カラーの設定が JSON で確認できます。create イベントの options には、この設定画面の内容が反映された状態で渡ってきます。つまり MTAppjQuery でのカスタマイズは「設定画面の内容を土台にして、さらに上書きする」という関係になります。

管理画面が開けなくなったときは

自由テキストエリアに書いた JavaScript に構文エラーがあると、管理画面が正常に表示されなくなることがあります。そんなときは URL に &mtappjquery=disabled を付けてアクセスしてください。MTAppjQuery を無効にした状態で管理画面を開けるので、そこから設定を修正できます。

まとめ

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

  • MT9 の標準エディタは Tiptap ベースの MTRichTextEditor。TinyMCE 向けのカスタマイズコードは使えない
  • 設定画面（システム全体・共通）でできることをまず確認する
  • コードでのカスタマイズは MTRichTextEditor.on('create', ...) が入口
  • v3.6.9 以降は自由テキストエリア「js_include の出力直前」、v3.6.8 以前は「head の開始タグの直後」に type="module" のベースコードを貼れば準備完了

次回は、いちばん要望の多いツールバーのカスタマイズを取り上げます。

今回は以上となります。

この記事をシェア

関連記事