【第1回】必要な基礎知識と準備 - MTAppjQuery で Movable Type の TinyMCE をカスタマイズ

MTAppjQuery v3 を使って Movable Type 8 の TinyMCE をカスタマイズするのに必要な基礎知識と準備をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

はじめに

この記事は弊社の Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

今回の概要

この記事は「【連載】MTAppjQuery v3 で Movable Type の TinyMCE をカスタマイズ」の第1回です。

今回は、MTAppjQuery v3 を使って TinyMCE をカスタマイズするための基礎知識についてご説明します。

カスタマイズの準備

MTAppjQuery プラグインを使って TinyMCE をカスタマイズする準備として、システムまたは各サイトの MTAppjQuery プラグインの設定の「自由テキストエリア > head の開始タグの直後」欄に下記のようなカスタマイズのベースとなるコードを入力します。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {};
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>
Clean Shot 2024 05 07 at 15 25 47 2x

設定を保存して準備完了です。

まだこの時点では、記事の本文欄もコンテンツフィールドも TinyMCE のボタンは何も変化していません。

Clean Shot 2024 05 07 at 15 28 50 2x
Clean Shot 2024 05 07 at 15 29 00 2x

カスタマイズの仕組み

先ほどのベースとなるコードを順に見ていきます。

MTML側 - js_include 変数に append

<mt:SetVarBlock name="js_include" append="1">
    <script>
        // 省略
    </script>
</mt:SetVarBlock>

このように MT の管理画面のテンプレートの変数 js_includeappend するのが最初のポイントです。

js_include というMT変数は、Movable Type の TinyMCE デフォルトの設定が格納されている MT.Editor.TinyMCE.config という変数が定義されているものの、まだ TinyMCE が初期化されていない絶妙の位置に書き出されます。したがって、この時点で TinyMCE の既存の設定をカスタマイズすれば、カスタマイズされた内容でエディタが初期化されるようになります。

さらに詳しく見ていきましょう。

JavaScript 側 - MT の TinyMCE の設定が入っているところ

前述したとおり、Movable Type の TinyMCE の設定は MT.Editor.TinyMCE.config というプロパティに格納されています。

コンソールで「MT.Editor.TinyMCE.config」といれてエンターしてみると、どのような値が設定されているかがわかります。

Clean Shot 2024 05 07 at 15 37 07 2x
let mtappCustomConfig = {};
Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);

そしてこの部分では、 let mtappCustomConfig = {}; という部分にカスタマイズする設定を入れ、その設定で元の MT.Editor.TinyMCE.config を上書きするという仕組みになっています。

Clean Shot 2024 05 07 at 18 18 11 2x

TinyMCE の公式リファレンス

TinyMCE 6 の公式リファレンスは下記のページになります。

MT のTinyMCE をカスタマイズする大半のケースはツールバーに関することだと思いますので、その際は下記のドキュメントが参考になると思います。

他にも頻繁に見そうなページがありましたら上記に追加していきますね。

Published 2024-09-09
Updated 2024-09-17

「MTAppjQuery」カテゴリの記事一覧