Movable Typeを利用したサイト構築で悩んでいたことの1つに、リッチテキストエディタでsection要素などを気軽に追加できないことがありました。
私はソースコード画面に切り替えてsection要素等を追加していたのですが、これだとHTMLに詳しくない方が編集する場合に不都合が発生します。かといって、他社のように空のp要素のを連続させたりして代替することを許容できませんでした。
MT5.2のTinyMCEではなんとかできないかと探っていたのですが、TinyMCEのドキュメントにて「TinyMCE - HTML5 formats」を見つけました。早速試したところ、スタイルプルダウンメニューでsection要素の追加に成功しましたので紹介します。
カスタマイズのポイント（セクションの例）
mt-static/plugins/TinyMCE/lib/js/adapter.jsに記述しても動くと思いますが、MT5.2ではプラグインによる拡張方法が用意されていることから、プラグインを作るのがベストでしょう。ここでは、以前作成・紹介した「Extend TinyMCE」プラグインのmt-static/plugins/ExtendTinyMCE/extension.jsに設定を追記しました。
まずstyle_formatsオプションにセクションを追加します。wrapper: trueは、カーソルのある要素（p要素や見出し要素）を内包する指定、merge_siblings: falseは、section要素の後ろで新しくsection要素を追加しようとした際に、前のsection要素と結合されて1つのsectionになることを許可しない指定です。
style_formats = [
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'セクション', block: 'section', wrapper: true, merge_siblings: false }
],また、section要素を区切ることができるように次の設定を加えます。これにより、section要素内最終段落の末尾で2回リターンを押すとsection要素から抜けることができます。
end_container_on_empty_block: trueソースコード一式は、GitHubのhideki-a / mt-plugin-extend-tinymceにて公開しています。
カスタマイズ結果
プルダウンメニュー内に「セクション」が追加されました。
そして、このようにsection要素を利用したマークアップも簡単に行えるようになりました。
編集は、まず最初のセクションの内容を書いてスタイルプルダウンメニューで「セクション」を選択し、section要素で包含しました。そして「プラグインに設定を追記しました。」の文の後ろで2回リターンを押しsection要素から抜けます。そして次のセクションの内容を記述しました。