【Movable Type 7】TinyMCEボタンのカスタマイズ

「Movable Type Advent Calendar 2018」 9日目の記事です。

久しぶりにMovable Type案件を対応しておりまして、WordPressとの差異に困惑しながら構築を進めております。

そこで、特に気になりました、投稿エディタについて。

WYSIWYGエディタ上部にあるボタン、インストール後の標準では下記になっているかと思います。

パッと見でわかる方もいると思いますが、
要素の配置ボタン（中央寄せや右寄せ）やテーブル生成ボタンがないことにお気づきでしょうか。
テーブルタグについては、ぶっちゃけなくてもいいのですが、配置はよく使うため、なんでないんだろうという疑問でした。

これ、MT5やMT6ではあった気がするのですが、勘違いでしたらゴメンナサイ。

WordPressでは、add_filterで、設定を書き換えているのですが、
あれ、、、Movable Type ってどこから書き換えるのだろうとなりました。

記憶を辿って辿って、プラグインで対応することを思い出しました。

Movable TypeのTinyMCEに任意のボタンを追加する方法 – 小粋空間

昔からあるプラグインですが、TinyMCEのカスタマイズが出来るプラグインです。
最新のMovable Type7 でも問題なく使えました。

設置について
1. 今回のカスタマイズでは、下記の対応を行いました。
2. その他カスタマイズについて
検証・確認バージョン

設置について

ページ内に設置されている「SampleTinyMCE_1_00.zip」をダウンロードして、ドキュメントに沿ってファイルを上書きします。

mt-static/
　└ plugins/
　　　└ SampleTinyMCE/
　　　　　└ extension.js
plugins/
　└ SampleTinyMCE/
　　　├ config.yaml
　　　└ tmpl/
　　　　　└ extension.tmpl

今回のカスタマイズでは、下記の対応を行いました。

エディタのbodyに .entry_body を追加。
文字サイズが変更できるように、リストを追加。
要素の見出しリストを整理。（h1は基本ページタイトルとなるため除外）

(function ($) {
  var config = MT.Editor.TinyMCE.config;
  $.extend(config, {
    body_class: 'entry_body',
    fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
    plugin_mt_wysiwyg_buttons2: 'undo,redo,|,forecolor,backcolor,removeformat,|,alignleft,aligncenter, alignright,indent,outdent,|,mt_fullscreen',
    plugin_mt_wysiwyg_buttons3: 'fontsizeselect,|,formatselect',
    block_formats: '段落=p;見出し1=h2;見出し2=h3;見出し3=h4;見出し4=h5'
  });
}(jQuery));

上記、設定後のエディタボタンの配置イメージです。

その他カスタマイズについて

その他の設定についても同様にconfigに追記することで可能となります。
使用されているエディタが、TinyMCEのバージョン4となりますので、configの書き方は、公式を確認してください。

TinyMCE | Content Formatting

検証・確認バージョン

Movable Type Pro r.4208 with: Professional Pack 3.01