MTAppjQuery v3 を使って Movable Type 8 の TinyMCE をカスタマイズするのに必要な基礎知識と準備をご紹介します。
この記事は弊社の 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>
設定を保存して準備完了です。
まだこの時点では、記事の本文欄もコンテンツフィールドも TinyMCE のボタンは何も変化していません。
先ほどのベースとなるコードを順に見ていきます。
<mt:SetVarBlock name="js_include" append="1">
<script>
// 省略
</script>
</mt:SetVarBlock>
このように MT の管理画面のテンプレートの変数 js_include
に append
するのが最初のポイントです。
js_include
というMT変数は、Movable Type の TinyMCE デフォルトの設定が格納されている MT.Editor.TinyMCE.config
という変数が定義されているものの、まだ TinyMCE が初期化されていない絶妙の位置に書き出されます。したがって、この時点で 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 6 の公式リファレンスは下記のページになります。
MT のTinyMCE をカスタマイズする大半のケースはツールバーに関することだと思いますので、その際は下記のドキュメントが参考になると思います。
他にも頻繁に見そうなページがありましたら上記に追加していきますね。