Movable Type 5.2のRTE（TinyMCE）に独自CSSを適用する

Movable Typeの次期バージョンの5.2では、リッチテキストエディタ(RTE)がTinyMCEベースのものに変更されます。

このリッチテキストエディタでは、独自のCSSを適用して、公開サイトと同じようなデザインの状態で編集することができるようになっています。
テストしてみましたので紹介します。

ブログ／ウェブサイトの「設定」→「投稿」メニューを選ぶと、そのページの中に「WYSIWYG Editor Setting」という欄があります（正式版ではこのメッセージは日本語化されると思われます）。
この欄に、外部CSSファイルのアドレスを指定すると、そのCSSがテキスト編集欄に適用されます。

例えば、CSSに以下のように書くと、テキスト編集欄にあるh2要素の左と下にボーダーを引き、左のパディングを指定することができます。 

h2 {
    border-left: 5px solid black;
    border-bottom: 1px solid black;
    padding-left: 10px;
}

さらに、ブログ記事とウェブページとで、別々のスタイルを割り当てることもできます。
ブログ記事では、編集欄に「entry」のクラスが指定されています。
一方、ウェブページの編集欄には「page」のクラスが指定されています。
したがって、「.entry ○○」「.page ○○」のようにセレクタを指定することで、ブログ記事とウェブページのスタイルを分けることができます。

例えば、CSSに以下のように書くと、ブログ記事のh2要素には青いボーダーがつき、ウェブページのh2要素には赤いボーダーがつきます。 

.entry h2 {
    border-left: 5px solid blue;
    border-bottom: 1px solid blue;
    padding-left: 10px;
}
.page h2 {
    border-left: 5px solid red;
    border-bottom: 1px solid red;
    padding-left: 10px;
}

なお、githubのMovable Typeのリポジトリのdevelopブランチでは、すでにTintMCEがマージされています。
ベータ版を待たずに、新しいリッチテキストエディタの動作を試すことができます。