MTAppjQuery

【第4回】エディタの見た目を実サイトに合わせる - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ

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

目次

この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第4回です。今回は、エディタの編集領域の見た目を実際のサイトに近づける方法をご紹介します。

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

編集画面と公開ページの見た目を揃える意味

リッチテキストエディタは「見たまま編集」がうたい文句ですが、初期状態の編集領域には管理画面の標準スタイルが当たっているだけです。公開ページの CSS とは違うので、編集中の見た目と公開後の見た目にギャップが生まれます。

見出しのデザイン、本文の行間、リンクの色。このあたりが編集画面でも再現されていると、編集者は仕上がりを想像しながら書けるようになります。TinyMCE では content_css オプションで実現していたことの MT9 版が、今回のテーマです。

stylesheets で CSS を読み込む

編集領域に CSS を追加するには stylesheets オプションを使います。値は URL の配列です。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        options.stylesheets = [
            ...(options.stylesheets || []),
            'https://example.com/css/editor.css',
        ];
    });
}
</script>

配列なので複数のファイルを指定できます。既にほかのカスタマイズで stylesheets が設定されている可能性を考えて、スプレッド構文で既存の値を引き継いでから追加する書き方にしています。

CSS ファイルは、公開サイトのテーマ CSS をそのまま指定しても良いですし、エディタ用に絞ったものを別途用意しても構いません。公開サイトの CSS をそのまま使う場合は、ヘッダやフッタなど本文以外のスタイルも含まれるため、思わぬ表示になることがあります。僕は本文領域のスタイルだけを抜き出したエディタ専用 CSS を用意する方法をおすすめします。

エディタ用の CSS を置く場所は、MTAppjQuery ユーザーならおなじみの mt-static/support/ 配下が手軽です。たとえば次のような CSS を editor.css として置いておきます。

h2 {
    margin-bottom: 1em;
    padding: 0.5em;
    background: #eaf3ff;
    border-bottom: solid 3px #516ab6;
}
h3 {
    margin-bottom: 1em;
    padding-left: 0.5em;
    border-left: solid 4px #516ab6;
}
a {
    color: #1155cc;
}

classNames で編集領域にクラスを付ける

公開ページの CSS が .entry-body h2 { ... } のように親クラス前提で書かれていると、CSS を読み込んだだけではスタイルが当たりません。そんなときは classNames オプションで編集領域そのものにクラスを付与します。

MTRichTextEditor.on('create', (options) => {
    options.classNames = [...(options.classNames || []), 'entry-body'];
    options.stylesheets = [
        ...(options.stylesheets || []),
        'https://example.com/css/style.css',
    ];
});

これで編集領域が .entry-body を持つ要素になるので、公開ページ用の CSS がそのままのセレクタで効くようになります。テーマの CSS を使い回したいときに便利な組み合わせです。

height でエディタの高さを変える

ついでに、編集領域の高さも変えておきましょう。height オプションで指定します。

MTRichTextEditor.on('create', (options) => {
    options.height = 600;
});

長文の記事を書くサイトでは、初期の高さだとスクロールが頻発してストレスになります。編集者の作業環境に合わせて調整してみてください。

単位なしの数値で渡してください

height には 単位を付けない数値を渡します。600 と書けば px として扱われます。

うっかり '600' と文字列で書くと、エラーも出ないまま何も起きません。エディタ側は値が数値のときだけ px を補う実装になっていて、文字列はそのまま CSS の値として使われます。その結果 height: 600 という単位のない不正な指定になり、ブラウザに無視されてしまうためです。単位まで書いた '600px' であれば、文字列でも正しく効きます。

高さが変わらないときは、まずここを疑ってみてください。

指定しない場合、高さは編集者ごとに変わります

エディタの下端をドラッグして高さを変えると、その値がブラウザの localStorage（キーは mt-rich-text-editor-height）に保存され、次回以降も引き継がれます。

つまり height を指定しない場合、エディタの高さはその人が最後にリサイズした高さになります。「自分の画面では広いのに、別の編集者の画面では狭い」というのは、これが理由です。

全員で同じ高さに揃えたいときは height を明示してください。height を指定すると、保存されている値より優先されます。

まとめて書いた完成形

今回の内容をひとつにまとめると次のようになります。

<script type="module">
if (window.MTRichTextEditor) {
    MTRichTextEditor.on('create', (options) => {
        options.classNames = [...(options.classNames || []), 'entry-body'];
        options.stylesheets = [
            ...(options.stylesheets || []),
            '/mt-static/support/editor.css',
        ];
        options.height = 600;
    });
}
</script>

stylesheets のパスはお使いの環境の mt-static の URL に合わせて調整してください。

まとめ

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

  • 編集領域への CSS 追加は stylesheets（URL の配列）。TinyMCE の content_css に相当する
  • 親クラス前提の CSS には classNames で編集領域にクラスを付与して対応する
  • 高さは height。単位なしの数値で渡す（'600' のような単位なしの文字列は無視される）。未指定だと編集者が最後にリサイズした高さが使われる
  • 既存の値をスプレッド構文で引き継いでから追加するのが安全

次回は、組み込み拡張のオプション調整と、出力される HTML の整形を取り上げます。

今回は以上となります。

この記事をシェア

関連記事