MT5.2のTinyMCEでsection要素などを挿入可能にするカスタマイズ

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にて公開しています。

カスタマイズ結果

プルダウンメニュー内に「セクション」が追加されました。
カスタマイズ後のTinyMCEのスタイルプルダウンメニュー

そして、このようにsection要素を利用したマークアップも簡単に行えるようになりました。
section要素を2つ挿入した記事のソースコード例

編集は、まず最初のセクションの内容を書いてスタイルプルダウンメニューで「セクション」を選択し、section要素で包含しました。そして「プラグインに設定を追記しました。」の文の後ろで2回リターンを押しsection要素から抜けます。そして次のセクションの内容を記述しました。

この記事のタグ