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

今回の概要

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

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

カスタマイズの準備

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

    
        let mtappCustomConfig = {};
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    

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

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

カスタマイズの仕組み

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

MTML側 - js_include 変数に append

    
        // 省略
    

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

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」といれてエンターしてみると、どのような値が設定されているかがわかります。

let mtappCustomConfig = {};
Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);

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

TinyMCE の公式リファレンス

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

• TinyMCE 6 Documentation | TinyMCE Documentation

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

• Options for customizing the editor's toolbars | TinyMCE Documentation 
• Toolbar Buttons Available for TinyMCE | TinyMCE Documentation

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